Nachbar-Geschwister-Kombinator

Der Nachbar-Geschwister-Kombinator (+) trennt zwei Selektoren und wählt das zweite Element nur aus, wenn es unmittelbar auf das erste Element folgt und beide Kinder desselben übergeordneten Elements sind.

/* 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 zeigt, wie man das nächste Geschwisterelement wählt, wenn dieses ein bestimmter Typ ist.

CSS

Wir stylen nur das <li>, das unmittelbar nach einem <li> kommt, welches 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

Auswahl eines vorherigen Geschwisters

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

CSS

Wir stylen nur das <li>, dessen nächstes Geschwister ein <li> ist, das das letzte seiner Art ist:

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-Geschwister-Kombinator