Next-sibling Kombinator

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der next-sibling Kombinator (+) trennt zwei Selektoren und trifft auf das zweite Element nur zu, wenn es unmittelbar dem ersten Element folgt und beide Kinder desselben übergeordneten Elements sind.

css
/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

Syntax

css
/* The white space around the + combinator is optional but recommended. */
former_element + target_element { style properties }

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie man das nächste Geschwisterelement auswählt, wenn dieses nächste Geschwisterelement von einem bestimmten Typ ist.

CSS

Wir stylen nur das <li>, das unmittelbar nach einem <li> kommt, das das erste seiner Art ist:

css
li:first-of-type + li {
  color: red;
  font-weight: bold;
}

HTML

html
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

Ergebnis

Auswahl eines vorherigen Geschwisterelements

Der next-sibling Kombinator kann innerhalb des funktionalen Selektors :has() verwendet werden, um das vorherige Geschwisterelement auszuwählen.

CSS

Wir stylen nur das <li>, das ein nachfolgendes Geschwisterelement hat, das ein <li> ist, das das letzte seiner Art ist:

css
li:has(+ li:last-of-type) {
  color: red;
  font-weight: bold;
}

HTML

html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three!</li>
  <li>Four</li>
</ul>

Ergebnis

Spezifikationen

Specification
Selectors Level 4
# adjacent-sibling-combinators

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Next-sibling combinator (A + B)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch