¿Por qué no funciona este selector CSS: primer hijo?

Question

Estoy trabajando en un proyecto Asp.Net MVC 3 y me he topado con un muro de ladrillos sobre por qué esto no funciona como creo que debería.

Mi marcado es:

<fieldset> 
    <input type="hidden" value="2"> 
    <div class="editor-label"> 
     <label for="Name"> Name</label> 
    </div> 
    ... 
</fieldset> 

Mi CSS es:

.display-label, .editor-label 
{ 
    margin: 0.8em 0 0 0; 
    font-weight: bold; 
    display: inline; 
} 

fieldset > div:first-child 
{ 
    margin: 0; 
} 

Todo lo que quiero hacer es hacer la primera div en el conjunto de campos tienen un margen de 0. pensé que el selector fieldset > div:first-child aplicaría el estilo al "primer hijo de un fieldset, cuyo tipo es un div", pero aparentemente algo me está eludiendo.

He intentado esto en IE9/FF/Chrome, por lo que no es un viejo navegador que juega con mis selectores.

Gracias.

Answer 1

fieldset > div:first-child significa "seleccionar el primer elemento secundario de un fieldset si se trata de un div".

No significa "seleccionar el primer div en el fieldset".

El primer hijo en este caso es <input type="hidden" value="2">.

Para seleccionar ese div sin cambiar el código HTML, debe usar fieldset > div:first-of-type.

Desafortunadamente, mientras que :first-child es ampliamente compatible, :first-of-type solo funciona en IE9 + y otros navegadores modernos.

Entonces, en este caso, la mejor solución es continuar usando fieldset > div:first-child, y simplemente mueva <input type="hidden" value="2"> para que no sea el primer hijo.