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 de l'élément parent ou la structure enfant peuvent différer.

La :first-of-type Pseudo-Class

CSS3 offre le :first-of-type Pseudo-Class

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 de pseudo-classe équivalente :first-of-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.

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

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

.parentClass > * > .targetClass { /* Appliquer des styles à tous les éléments .targetClass dans .parentClass */ } .parentClass > * > .targetClass ~ .targetClass { /* Appliquer les styles de remplacement uniquement aux éléments .targetClass qui suivent */ }

Illustration :

    
...
    
First target
    
Second target
    
Third target

Dans ce scénario, la première règle appliquerait 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é du navigateur :

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.