Puis-je utiliser le sélecteur :first-of-type pour sélectionner le premier élément avec une classe spécifique ?

:sélecteur de premier type et sélection de classe

Le sélecteur :premier de type en CSS3 est conçu pour sélectionner le premier élément d'un type spécifique (par exemple, p, div, etc.) parmi ses frères et sœurs. Cependant, une idée fausse courante surgit lorsque l'on tente de l'utiliser conjointement avec un nom de classe.

Question :

Est-il possible d'utiliser le :first-of-type sélecteur pour sélectionner le premier élément avec une classe particulière nom ?

Réponse :

Malheureusement, il n'est pas possible d'y parvenir en utilisant un seul sélecteur. La pseudo-classe :first-of-type opère sur les types d’éléments, pas sur les noms de classe. Utiliser un sélecteur de classe avec cela signifie sélectionner des éléments qui ont la classe spécifiée et qui sont également les premiers de leur type au sein de leur groupe frère.

Solution de contournement :

Comme il existe non : sélecteur de première classe fourni par CSS, une solution de contournement peut être utilisée pour cibler la première occurrence d'une classe :

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

Ici, la première La déclaration de classe définit la couleur de tous les éléments avec la classe "myclass1" sur rouge. La déclaration suivante cible tout élément de classe « maclasse1 » immédiatement précédé par un autre élément de même classe. Cette dernière déclaration réinitialise la couleur à sa valeur par défaut ou héritée pour tous sauf la première occurrence de la classe.

Des explications détaillées et des illustrations de cette solution de contournement peuvent être trouvées dans ce qui suit articles :

• https://css-tricks.com/the-problem-with-first-child-selector/
• https://www.quirksmode.org/css /contents.html#premier-de-type-frère

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!