CSS/Selektoren/Kombinator/Geschwisterselektor
Aus SELFHTML-Wiki
< CSS | Selektoren | Kombinator
Werden zwei einfache Selektoren durch die Tilde („~“) miteinander verbunden, z.B. „E ~ F“, so werden alle F-Elemente angesprochen, die im Elementbaum in derselben Ebene auf ein E-Element folgen - unabhängig davon, ob sich zwischen den Elementen weitere, im Selektor nicht genannte, Elemente befinden.
Beispiel
So sieht's aus
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel für den Geschwisterselektor</title>
<style>
h1 ~ p {font-weight: bold;}
</style>
</head>
<body>
<p>Erster Absatz.</p>
<h1>Der Geschwisterselektor</h1>
<p>Zweiter Absatz.</p>
<hr>
<p>Dritter Absatz.</p>
</body>
</html>
h1-Element folgen. Die Trennlinie zwischen den beiden Absätzen verhindert dies nicht. Einzig der erste Absatz wird mit normaler Schrift dargestellt, da er vor dem bedingendemh1-Element steht.