: il primo figlio non funziona come previsto

Sto provando a selezionare il primo h1 all’interno di un div con una class chiamata detail_container . Funziona se h1 è il primo elemento all’interno di questo div , ma se viene dopo questo non funzionerà.

  .detail_container h1:first-child { color:blue; }    

First H1

Second H1

Avevo l’impressione che il CSS che ho selezionato selezionasse il primo h1 indipendentemente da dove si trovi in ​​questo div . Come posso farlo funzionare?

Il mezzo di selezione h1:first-child

Seleziona il primo figlio del suo genitore
se e solo se è un elemento h1 .

Il :first-child del contenitore qui è l’ ul , e come tale non può soddisfare h1:first-child .

Ci sono i CSS3 :first-of-type per il tuo caso:

 .detail_container h1:first-of-type { color: blue; } 

Ma con problemi di compatibilità con i browser e quant’altro, è meglio dare il primo h1 una class, quindi scegliere come target quella class:

 .detail_container h1.first { color: blue; } 

:first-child seleziona il primo h1 se e solo se è il primo figlio del suo elemento genitore. Nel tuo esempio, l’ ul è il primo figlio del div .

Il nome della pseudo-class è in qualche modo fuorviante, ma è spiegato abbastanza chiaramente qui nelle specifiche.

jQuery :first selettore ti offre ciò che stai cercando. Puoi farlo:

$('.detail_container h1:first').css("color", "blue");

Per quel caso particolare puoi usare:

 .detail_container > ul + h1{ color: blue; } 

Ma se hai bisogno dello stesso selettore in molti casi, dovresti avere una class per quelli, come ha detto BoltClock.

puoi anche usare

 .detail_container h1:nth-of-type(1) 

Modificando il numero 1 con qualsiasi altro numero è ansible selezionare qualsiasi altro elemento h1.

È ansible avvolgere i tag h1 in un altro div e quindi il primo sarebbe il first-child . Quel div non ha nemmeno bisogno di stili. È solo un modo per separare quei bambini.

 

Title 1

Title 2