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

selector por contenido css

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 marca 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 que el primer div en el fieldset tenga 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 al parecer algo me está eludiendo.

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

Gracias.

Answer 1

fieldset > div:first-child significa "selecciona el primer elemento hijo de un fieldset si es 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 HTML, necesita usar fieldset > div:first-of-type .

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

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