CSS/Selektoren/Kombinator/Geschwisterselektor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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 ansehen …
<!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>
In diesem Beispiel werden sowohl der zweite als auch der dritte Absatz mit fett formatierter Schrift dargestellt, da beide Elemente auf das 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 bedingenden h1-Element steht.