Auswählen des ersten Vorkommens einer Klasse innerhalb eines übergeordneten Elements

In CSS entsteht die Herausforderung, wenn Sie auf das erste Element einer Klasse abzielen müssen bestimmte Klasse innerhalb eines übergeordneten Elements, insbesondere wenn die Klasse in ihren Geschwistern an unterschiedlichen Positionen erscheinen kann. Dieses Problem wird noch komplexer, wenn die Klassen- oder Kinderstruktur des übergeordneten Elements unterschiedlich sein kann.

Die :first-of-type-Pseudoklasse

CSS3 bietet die :first -of-type-Pseudoklasse, mit der Sie das erste Element eines bestimmten Typs innerhalb seiner Geschwister auswählen können. Es gibt jedoch keine entsprechende :first-of-class-Pseudoklasse speziell für die Auswahl des ersten Elements einer bestimmten Klasse.

Eine Problemumgehung mit ~ und General Sibling Selector

Eine Problemumgehung besteht darin, den allgemeinen Geschwisterkombinator (~) zusammen mit einer übergeordneten Regel zu verwenden. Indem Sie die Standardstile kennen, die auf andere Elemente derselben Klasse angewendet werden, können Sie eine spezifischere Regel erstellen, die die Standardstile nur für die Elemente überschreibt, die auf das erste Vorkommen der Zielklasse folgen.

Beispiel :

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

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

Illustration:

Bedenken Sie die folgende HTML-Struktur:

    
...
    
First target
    
Second target
    
Third target

In diesem Szenario würde die erste Regel Stile auf alle Elemente mit der Klasse „targetClass“ innerhalb des „parentClass“-Elements anwenden. Die zweite Regel würde diese Stile für alle „targetClass“-Elemente überschreiben, die auf die erste Regel folgen, und alle von der ersten Regel angewendeten benutzerdefinierten Stile zurücksetzen.

Browserkompatibilität:

Der allgemeine Geschwisterkombinator (~) wird von IE7 und höher erkannt. Daher ist dieser Workaround mit allen gängigen Browsern außer IE6 kompatibel.