: premier enfant ne fonctionne pas comme prévu

J’essaie de sélectionner le premier h1 dans un div avec une classe appelée detail_container . Cela fonctionne si h1 est le premier élément de cette div , mais s’il vient après cette ul il ne fonctionnera pas.

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

First H1

Second H1

J’avais l’impression que le CSS que je possède sélectionne le premier h1 peu importe où il se trouve dans ce div . Comment puis-je le faire fonctionner?

Le sélecteur h1:first-child signifie

Sélectionnez le premier enfant de son parent
si et seulement si c’est un élément h1 .

Le :first-child du conteneur est le ul , et en tant que tel ne peut pas satisfaire h1:first-child .

Il y a des CSS3 :first-of-type pour votre cas:

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

Mais avec les problèmes de compatibilité des navigateurs et autres, il est préférable de donner le premier h1 une classe, puis de cibler cette classe:

 .detail_container h1.first { color: blue; } 

:first-child sélectionne le premier h1 si et seulement si c’est le premier enfant de son élément parent. Dans votre exemple, le ul est le premier enfant du div .

Le nom de la pseudo-classe est un peu trompeur, mais il est clairement expliqué dans la spécification.

jQuery’s :first sélecteur vous donne ce que vous cherchez. Tu peux le faire:

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

Pour ce cas particulier, vous pouvez utiliser:

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

Mais si vous avez besoin de ce même sélecteur dans de nombreux cas, vous devriez avoir une classe pour ceux-là, comme l’a dit BoltClock.

vous pouvez aussi utiliser

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

En changeant le numéro 1 par tout autre numéro, vous pouvez sélectionner tout autre élément h1.

Vous pourriez envelopper vos balises h1 dans une autre div et le premier serait le first-child . Cette div n’a même pas besoin de styles. C’est juste un moyen de séparer ces enfants.

 

Title 1

Title 2