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.
/* 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 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:
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 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:
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
BCD tables only load in the browser