Pourquoi `:first-child` ne sélectionne-t-il pas le premier `` dans un `` ?

Interprétation incorrecte des sélecteurs CSS

Lors de la tentative de style du premier

élément dans un

avec le nom de classe detail_container, vous risquez de rencontrer des résultats inattendus. Ce problème est dû à une mauvaise compréhension du fonctionnement du sélecteur :first-child.

Le CSS que vous avez implémenté tente de sélectionner le premier

élément qui est également le premier enfant du detail_container

. Cependant, si le premier élément de ce

est un

, le sélecteur :first-child ne correspondra pas au

, même s'il s'agit du premier

dans le

.

Utilisation correcte du sélecteur CSS

Pour sélectionner le premier

, quelle que soit sa position dans le détail_container

, vous devez plutôt utiliser le sélecteur :first-of-type. Ce sélecteur sélectionnera le premier

qui est un enfant direct de l'élément parent spécifié.

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

Alternativement, pour une plus grande compatibilité avec les navigateurs, vous pouvez attribuer une classe au premier

et ciblez cette classe dans votre CSS.

.detail_container h1.first {
  color: blue;
}

En comprenant les nuances des sélecteurs CSS, vous pouvez vous assurer que vos règles de style ciblent avec précision les éléments souhaités.