Puis-je utiliser le sélecteur « :first-of-type » de CSS3 avec les noms de classe ?

Utiliser le sélecteur CSS3 :first-of-type avec les noms de classe

On peut se demander s'il est possible d'utiliser le sélecteur CSS3 :first -of-type en conjonction avec un nom de classe. Cependant, utiliser uniquement ce sélecteur peut ne pas suffire.

Explication

La pseudo-classe :first-of-type cible le premier élément d'un type spécifique au sein de son frères et sœurs. Lorsqu'il est combiné avec un sélecteur de classe, il filtre les éléments qui possèdent à la fois la classe spécifiée et qui sont le premier élément de leur type parmi leurs frères et sœurs.

Malheureusement, CSS n'a pas de sélecteur :first-of-class qui trouve uniquement la première occurrence d'un élément avec une classe particulière.

Solution de contournement

Pour contourner cette limitation, on peut utiliser la technique suivante :

.myclass1 {
  color: red;
}

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

Explication

Cette solution de contournement utilise le combinateur frère général (~) pour cibler tous les éléments de la classe myclass1 qui sont précédés par un autre élément de même classe. En définissant la couleur de ces éléments suivants par défaut ou héritée du div parent, nous supprimons efficacement la couleur rouge pour toutes les occurrences de .myclass1 sauf la première.

Ressources supplémentaires

Des explications plus détaillées et des illustrations visuelles de cette solution de contournement peuvent être trouvées ici :

• [Mozilla Developer Réseau](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Adjacent_sibling_selectors)
• [Astuces CSS](https://css-tricks.com/almanac/ selectors/c/combinators/#:~:text=Le combinateur ~ sélectionne tout,= 30 (la classe a spécificité))

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!