Comment sélectionner la première occurrence d'un élément de classe spécifique dans des structures variables ?

Sélection de la première occurrence d'un élément de classe spécifique

La sélection de la première occurrence d'un élément de classe particulier peut être difficile lorsque la structure et l'élément le nombre au sein de l’élément parent varie. Dans ce cas, le problème survient lors de la tentative de sélection du premier élément de classe « A » au sein d'un élément avec l'identifiant ou la classe « B ».

Surmonter le défi avec CSS3

CSS3 propose la pseudo-classe :first-of-type, qui cible le premier élément d'un type spécifique parmi ses frères et sœurs. Cependant, il n'existe pas d'équivalent : pseudo-classe de première classe.

Une solution de contournement

Comme solution de contournement, on peut utiliser le combinateur général de frères et sœurs (~ ) et appliquez une règle impérative pour "annuler" les styles d'origine appliqués à tous les éléments .A au sein de l'élément .C.

Le code CSS

Le code CSS suivant fournit la solution :

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

.C > * > .A ~ .A {
    /* Override styles only for .A elements following the first .A child */
}

Ce code applique des styles à tous les éléments .A qui sont des petits-enfants de .C. De plus, il remplace les styles des éléments .A suivants qui suivent le premier .A enfant de chaque élément situé sous .C.

Exemple d'illustration

Considérez la structure HTML suivante :

<div class="C">
    <div class="B">
        <div class="A">Content</div>
        <div class="A">Content</div>
    </div>
</div>

Dans ce scénario :

• Le premier élément .A recevrait les styles appliqués par la première règle.
• Le deuxième élément .A, suivant la première, recevrait les styles remplacés appliqués par la deuxième règle.

Compatibilité des navigateurs

Le sélecteur ~ est reconnu par IE7 et supérieur, qui signifie que cette solution est largement soutenue. Le seul navigateur majeur sur lequel il échoue est IE6.

En implémentant cette solution de contournement, les développeurs peuvent cibler et styliser de manière sélective la première occurrence d'un élément de classe spécifique, même lorsque la structure et le nombre d'éléments dans l'élément parent varient.

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!