¿Por qué no se aplica mi regla :first-child css?

<!-- 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> en cada <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.

preguntado el 04 de julio de 12 a las 10:07

2 Respuestas

:first-child selecciona el primero sus hijos. Utilizar :first-of-type para su propósito:

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

Respondido 04 Jul 12, 10:07

:first-child does not reference the element to be the first child of that type, but generally to be the first child of its parent! Citing MDN on this:

El :first-child CSS pseudo-class represents any element that is the first child element of its parent.

Lo que necesitas es el :first-of-type selectorEnlace MDN) como sigue:

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

Violín de ejemplo.

Respondido 04 Jul 12, 10:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.