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 Juli 2015.
Der Next-Sibling-Kombinator (+) trennt zwei Selektoren und wählt das zweite Element nur aus, wenn es dem ersten Element unmittelbar folgt und beide dasselbe übergeordnete Element 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
| Specification |
|---|
| Selectors Level 4 # adjacent-sibling-combinators |
Browser-Kompatibilität
Loading…