Comment cibler la première occurrence d'une classe au sein d'un élément parent en CSS ?

Sélection de la première occurrence d'une classe au sein d'un parent

En CSS, le défi se pose lorsque vous devez cibler le premier élément d'un classe spécifique au sein d'un élément parent, en particulier lorsque la classe peut apparaître à différentes positions au sein de ses frères et sœurs. Ce problème devient encore plus complexe lorsque la classe ou la structure enfant de l'élément parent peut différer.

La pseudo-classe :first-of-type

CSS3 offre le :first -of-type pseudo-class, qui permet de sélectionner le premier élément d'un type spécifique au sein de ses frères et sœurs. Cependant, il n'existe pas d'équivalent :first-of-class pseudo-class spécifiquement pour sélectionner le premier élément d'une classe donnée.

Une solution de contournement utilisant ~ et le sélecteur général de frères et sœurs

Une solution de contournement consiste à utiliser le combinateur général de frères et sœurs (~) avec une règle impérative. En connaissant les styles par défaut appliqués aux autres éléments de la même classe, vous pouvez créer une règle plus spécifique qui remplace les styles par défaut uniquement pour les éléments qui suivent la première occurrence de la classe cible.

Exemple :

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

Illustration :

Considérez la structure HTML suivante :

<div class="parentClass">
    <div class="someOtherClass">...</div>
    <div class="targetClass">First target</div>
    <div class="targetClass">Second target</div>
    <div class="targetClass">Third target</div>
</div>

Dans ce scénario, la première règle serait appliquez des styles à tous les éléments avec la classe "targetClass" à l'intérieur de l'élément "parentClass". La deuxième règle remplacerait ces styles pour tous les éléments « targetClass » qui suivent le premier, annulant ainsi tous les styles personnalisés appliqués par la première règle.

Compatibilité des navigateurs :

Le combinateur frère général (~) est reconnu par IE7 et versions ultérieures. Par conséquent, cette solution de contournement est compatible avec tous les principaux navigateurs à l'exception d'IE6.

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!