Kombinator für unmittelbar folgende Geschwisterelemente
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Der Kombinator für unmittelbar folgende Geschwisterelemente (+) trennt zwei Selektoren und wählt das zweite Element nur dann aus, wenn es unmittelbar auf das erste Element folgt und beide Kinder desselben übergeordneten element 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 Sie das unmittelbar folgende Geschwisterelement auswählen, wenn es einem bestimmten Typ entspricht.
HTML
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
CSS
Wir formatieren nur das <li>, das unmittelbar auf ein <li> folgt, das das erste Element seines Typs ist:
li:first-of-type + li {
color: red;
font-weight: bold;
}
Ergebnis
Ein vorheriges Geschwisterelement auswählen
Der Kombinator für unmittelbar folgende Geschwisterelemente kann innerhalb des funktionalen Selektors :has() verwendet werden, um das vorherige Geschwisterelement auszuwählen.
HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three!</li>
<li>Four</li>
</ul>
CSS
Wir formatieren nur das <li>, dessen unmittelbar folgendes Geschwisterelement ein <li> ist, das das letzte Element seines Typs ist:
li:has(+ li:last-of-type) {
color: red;
font-weight: bold;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # adjacent-sibling-combinators |