DerNext-Sibling-Kombinator (+) trennt zwei Selektoren und wählt das zweite Element nur aus, wenn es dem ersten Elementunmittelbar folgt und beide dasselbe übergeordneteElement haben.

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

Syntax

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

Beispiele

Grundlegende Verwendung

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

CSS

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

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

HTML

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

Ergebnis

Ein vorheriges Geschwisterelement auswählen

Der Next-Sibling-Kombinator kann innerhalb des:has() Funktionsselektors verwendet werden, um das vorherige Geschwisterelement auszuwählen.

CSS

Wir stylen nur das<li>, das ein nächstes Geschwisterelement hat, das ein<li> ist und das letzte seiner Art:

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

HTML

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Subsequent-Sibling-Kombinator