Comment sélectionner la première occurrence d'un élément de classe dans un conteneur en CSS ?

Sélecteur CSS pour sélectionner la première occurrence d'un élément de classe dans un conteneur donné

Lors de la sélection d'éléments en fonction de la classe, il est souvent nécessaire de cibler des occurrences spécifiques, telles que première instance dans un conteneur particulier. Cet article explique comment atteindre une telle précision.

Comprendre le défi

Considérons un scénario dans lequel vous devez styliser le premier élément de classe « A » situé dans un élément portant l'ID « B ». . En supposant que "B" n'est pas un enfant d'un autre élément "B", vous pouvez d'abord tenter d'utiliser une combinaison de ">" (sélecteur d'enfant) et ":first-child" (pseudo-classe). Cependant, cette approche ne suffit pas dans les cas où la position du premier élément « A » est dynamique ou imprévisible.

Surmonter les limitations

CSS3 propose le pseudo-":first-of-type" classe qui, comme son nom l'indique, sélectionne le premier élément d'un type donné parmi ses frères et sœurs. Malheureusement, il n'existe pas de pseudo-classe ":first-of-class" intégrée pour cibler la première occurrence d'une classe spécifique.

Pour contourner cette limitation, nous pouvons utiliser une solution de contournement en utilisant le combinateur général de frères et sœurs. "~." Cela nous permet de sélectionner des éléments en fonction de leur relation avec d'autres éléments partageant le même parent. En utilisant « ~ », nous pouvons cibler tous les éléments qui suivent le premier élément « A » dans le conteneur.

Implémentation de la solution

Pour implémenter cette solution, nous utiliserions deux règles CSS :

1. Règle 1 : Cible tous les éléments ".A" qui sont des petits-enfants de l'élément ".C" (le conteneur parent supposé). Cette règle applique les styles souhaités au premier élément ".A" qui répond à ce critère.
2. Règle 2 : Cible tous les éléments ".A" qui suivent les premiers sélectionnés dans la règle 1. Cette règle utilise "~" pour sélectionner tous les frères et sœurs des éléments "A" ciblés, qui sont également des petits-enfants de ".C". Tous les ajustements nécessaires aux styles appliqués par la règle 1 peuvent être annulés ici.

Compatibilité des navigateurs

Il est important de noter que le sélecteur ~ fait partie de CSS3, qui est reconnu par la plupart des principaux navigateurs, y compris IE7 et versions ultérieures.

Application de style de visualisation

Pour illustrer comment les règles s'appliquent, considérons la structure HTML suivante :

<div class="C">
    <div class="B">
        <div class="E">Content</div> <!-- [1] -->
        <div class="F">Content</div> <!-- [1] -->
        <div class="A">Content</div> <!-- [2] -->
        <div class="A">Content</div> <!-- [3] -->
    </div>
    <div class="D">
        <div class="A">Content</div> <!-- [2] -->
        <div class="E">Content</div> <!-- [1] -->
        <div class="F">Content</div> <!-- [1] -->
        <div class="A">Content</div> <!-- [3] -->
    </div>
</div>

Règle 1 : Appliquerait des styles aux éléments [2], puisqu'ils sont les premiers éléments « A » dans leurs conteneurs « .B » respectifs.

Règle 2 : S'appliquerait styles aux éléments [3], puisqu'il s'agit d'éléments "A" qui suivent ceux précédemment sélectionnés ([2]).

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!