Question

<!-- HTML -->
<section class="row slide">
    <div class="span4">
        <h1>
            <span>Some</span>
            <br />
            <span>Title</span>
        </h1>
    </div>
</section>

<section class="row slide">
    <div class="span4">
        <h1>
            <em>Some emphasis</em>
            <br />
            <span>Some</span>
            <br />
            <span>Title</span>
        </h1>
    </div>
</section>

<section class="row slide">
    <div class="span4">
        <h1>
            <em>Some other emphasis</em>
            <br />
            <span>Some</span>
            <br />
            <span>Title</span>
        </h1>
    </div>
</section>


/* CSS */
section h1 span:first-child{
    color:#FF0033;
    }

I’m trying to target the first <span> in every <h1> tag that’s in a <section> container but as soon as the <span> is not the first child element (like the <em>) then it’s not applying the rule.

Answer 1

:first-child selects the first child. Use :first-of-type for your purpose:

section h1 span:first-of-type {
    color: #FF0033;
}