CSS/Selektoren/Geschwister-Kombinator

Der Geschwister-Kombinator spricht ein Element F an, falls F und E dasselbe Elternelement haben und F auf E im Elementbaum folgt.

Syntax

E ~ F

Beispiel

#linkliste ~ p { 
  margin-top: 1em; 
}

<section>
  <p>Absatz 1</p>
  <ul id="linkliste">...</ul>
  <p>Absatz 2</p>
  <p>Absatz 3</p>
  <aside><p>Absatz 4</p></aside>
</section>
<p>Absatz 5</p>

Die Absätze 2 und 3 werden selektiert und erhalten einen oberen Abstand von 1em. Bei Absatz 1 gilt die Bedingung „F folgt auf E“ nicht, bei den Absätzen 4 und 5 ist das Elternelement unterschiedlich.

Empfehlung: Wenn Sie alle Absätze innerhalb eines Elternelements selektieren wollen, das bestimmtes Kindelement hat, können Sie die :has()-Pseudoklasse nutzen.

Siehe auch

• Selektoren in CSS/Einstieg#Geschwister-Kombinator

Weblinks

• W3C: general sibling-combinators CSS Selectors Level 3