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

BCD tables only load in the browser

Siehe auch