Angrenzende Geschwisterselektoren

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

 Mitwirkende an dieser Seite: Sebastianz
 Zuletzt aktualisiert von: Sebastianz,