Dies wird Nachbar- oder Nächstes-Geschwister-Element-Selektor genannt. Er selektiert nur das angegebene Element, das dem zuvor angegebenen Element direkt folgt.
Syntax
vorheriges_Element + Zielelement { Stileigenschaften }
Beispiel
li:first-of-type + li {
color: red;
}
<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
Ein weiterer Anwendungsfall ist das Stylen von "Beschriftungs-spans" der darauffolgenden <img> Elemente:
img + span.caption {
font-style: italic;
}
matcht die folgenden <span> Elemente:
<img src="photo1.jpg"><span class="caption">The first photo</span> <img src="photo2.jpg"><span class="caption">The second photo</span>
Spezifikationen
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4 Die Definition von 'next-sibling combinator' in dieser Spezifikation. |
Arbeitsentwurf | |
| Selectors Level 3 Die Definition von 'Adjacent sibling combinator' in dieser Spezifikation. |
Empfehlung | |
| CSS Level 2 (Revision 1) Die Definition von 'Adjacent sibling selectors' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
| Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | (Ja) | (Ja) | 7.0[1] | (Ja) | (Ja) |
| Merkmal | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | 2.1 | (Ja) | ? | (Ja) | (Ja) |
[1] Internet Explorer 7 aktualisiert den Style nicht korrekt, wenn ein Element dynamisch vor einem Element platziert wurde, das auf den Selektor gepasst hat. Wenn in Internet Explorer 8 ein Element durch Klick auf einen Link dynamisch eingefügt wird, wird der :first-child-Stil nicht angewandt bis der Link den Fokus verliert.
Siehe auch
Schlagwörter des Dokuments und Mitwirkende
Schlagwörter:
Mitwirkende an dieser Seite:
Sebastianz
Zuletzt aktualisiert von:
Sebastianz,