Perché non funziona questo selettore CSS: first-child?

Question

Sto lavorando ad un progetto di Asp.Net MVC 3 e ho imbattuto in un muro di mattoni sul perché questo non funziona come penso che dovrebbe.

mio markup è:

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

mio CSS è:

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

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

Tutto quello che voglio fare è fare il primo div nel fieldset hanno un margine pari a 0. Ho pensato che il selettore fieldset > div:first-child applicherebbe lo stile a "il primo figlio di un fieldset, il cui tipo è un div", ma a quanto pare qualcosa mi sfugge.

Ho provato questo in IE9/FF/Chrome, quindi non è un vecchio browser a fare casino con i miei selettori.

Grazie.

Answer 1

fieldset > div:first-child significa "selezionare il primo elemento figlio di un fieldsetse si tratta di un div".

Non significa "selezionare il primo div nel fieldset".

Il primo figlio in questo caso è <input type="hidden" value="2">.

Per selezionare quello div senza modificare l'HTML, è necessario utilizzare fieldset > div:first-of-type.

Sfortunatamente, mentre il :first-child è ampiamente supportato, :first-of-type funziona solo con IE9 + e altri browser moderni.

Quindi, in questo caso, la soluzione migliore è continuare a utilizzare fieldset > div:first-child e spostare semplicemente <input type="hidden" value="2"> in modo che non sia il primo figlio.