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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 7
Hinweise
Vollständige Unterstützung 7
Hinweise
Hinweise Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector.
Hinweise In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.
Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

[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: ExE-Boss, Sebastianz
Zuletzt aktualisiert von: ExE-Boss,