Comment sélectionner le premier élément d'une classe dans un conteneur en utilisant CSS ?

Sélecteur CSS pour sélectionner le premier élément d'une classe donnée

Dans le développement Web, la sélection d'éléments spécifiques sur une page Web est cruciale pour le style et la fonctionnalité. Une tâche courante consiste à sélectionner la première occurrence d'un élément avec une classe particulière au sein d'une hiérarchie plus large.

Considérez un scénario dans lequel vous devez sélectionner le premier élément avec la classe « A » dans un élément avec l'identifiant ou la classe « » B'. Tandis que la combinaison de '>' et les sélecteurs « premier enfant » peuvent fonctionner dans certains cas, ils échouent lorsque la position de l'élément « A » varie dans la hiérarchie des éléments « B ».

Solution CSS3 : :premier de type

CSS3 propose une solution via la pseudo-classe :first-of-type, qui permet de sélectionner le premier élément d'un type spécifié par rapport à ses frères et sœurs. Cependant, CSS3 n'inclut pas de pseudo-classe :first-of-class.

Solution de contournement à l'aide du combinateur général de frères et sœurs (~)

Comme solution de contournement, vous pouvez utiliser le combinateur général de frères et sœurs ( ~) en conjonction avec des remplacements CSS pour obtenir le résultat souhaité. Le sélecteur ~ correspond à tout élément qui est un frère de l'élément sélectionné par le sélecteur de gauche, mais pas un enfant direct.

Considérez cette règle :

.C > * > .A {
    /* Style every .A that's a grandchild of .C */
}

Cette règle sélectionne chaque élément de classe « A » qui est un petit-enfant d'un élément de classe « C ». Cela suppose que « .C » est un ancêtre commun de tous les éléments « A » que vous souhaitez styliser.

Ensuite, ajoutez une règle prédominante :

.C > * > .A ~ .A {
    /* Style only the .A elements following the first .A child of each element that's a child of .C */
}

Cette règle utilise le ~ sélecteur pour cibler uniquement les éléments « A » qui viennent après un élément « A » précédent avec le même parent. Il remplace effectivement les styles appliqués par la première règle.

Exemple :

Considérez la structure HTML suivante :

<div>

Les règles CSS ci-dessus appliqueront les styles comme suit :

• Les éléments [1] n'ont pas de classe 'A' et ne sont pas affectés.
• Les éléments [2] sont les premiers éléments 'A' au sein de leurs éléments parents respectifs et recevront les styles définis dans la première règle.
• Les éléments [3] ne sont pas les premiers éléments 'A' et recevront les styles définis dans la règle dominante, qui remplacent la première règle.

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!