Est-ce que :first-of-type peut sélectionner le premier élément avec un nom de classe spécifique ?

Utilisation : du sélecteur de premier type avec le nom de classe

Question :

Peut le sélecteur CSS3 :first-of-type soit utilisé pour sélectionner le premier élément avec une classe spécifique name?

Réponse :

Non, il n'est pas possible d'utiliser :first-of-type seul pour sélectionner le premier élément d'une classe particulière.

Explication :

La pseudo-classe :first-of-type cible le premier élément de son type parmi ses frères et sœurs. L'ajout d'un sélecteur de classe ou d'un sélecteur de type à cette pseudo-classe indique que la sélection doit être limitée aux éléments d'un type spécifique (par exemple, div ou p) qui portent également le nom de classe donné. Cependant, CSS ne fournit pas de sélecteur :first-of-class dédié qui sélectionne uniquement la première occurrence d'une classe.

Solution de contournement :

En guise de solution de contournement, vous peut obtenir cette fonctionnalité en utilisant une combinaison de noms de classe et de spécificité de sélecteur :

1. Attribuez un nom de classe (par exemple, .myclass1) au premier élément auquel vous souhaitez appliquer un style unique.
2. Utilisez un sélecteur suivant avec le même nom de classe et le sélecteur frère (~) pour réinitialiser tous les styles appliqués après le premier élément.

Exemple :

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

Cela garantit que seul le premier élément avec la classe .myclass1 reçoit le style spécifié, tandis que les suivants les éléments héritent du style par défaut ou parent.

Notes supplémentaires :

• Autres techniques CSS, telles que nth-child() ou :last-of- Les sélecteurs type() peuvent être utilisés pour des besoins de sélection plus complexes.
• L'utilisation de JavaScript ou de préprocesseurs peut offrir une flexibilité supplémentaire pour sélectionner des éléments spécifiques en fonction de leur classe. noms.

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!