Le sélecteur `:first-of-type` de CSS3 peut-il cibler la première instance d'une classe spécifique ?

Le sélecteur CSS3 :first-of-type peut-il cibler des noms de classe spécifiques ?

Alors que le sélecteur CSS3 :first-of-type peut sélectionner le premier élément d'un type spécifique (par exemple, div, p), il ne peut pas être utilisé indépendamment pour cibler la première occurrence d'un nom de classe. En effet, utiliser un sélecteur de classe (ou un sélecteur de type) avec :first-of-type signifie sélectionner un élément qui :

• A la classe (ou le type) spécifié
• Est-ce que premier élément de ce type parmi ses frères et sœurs

Cependant, il n'existe pas de sélecteur :first-of-class inhérent en CSS qui sélectionne exclusivement la première instance de une classe.

Solution de contournement

Pour obtenir cette fonctionnalité, une solution de contournement peut être utilisée :

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default or inherited from parent */; }

Cette solution de contournement utilise le combinateur frère adjacent ( ~) pour styliser toutes les occurrences de .myclass1 sauf la première. Le premier .myclass1 héritera de sa couleur de son div parent (ou par défaut des valeurs par défaut du navigateur).

Pour plus d'informations et des illustrations visuelles sur cette solution de contournement, reportez-vous à :

• [W3Schools : Utilisation d'un enfant et d'un frère ou d'une sœur Sélecteurs](https://www.w3schools.com/css/sel_combinators.asp)
• [Astuces CSS : styliser le premier frère/sœur](https://css-tricks.com/styling-first-sibling /)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!