CSS: die Kombinatoren
Kindselektor
Kindselektor: e > f
Werden zwei Selektoren durch den Kombinator ">" verbunden, so wird das Element f nur dann angesprochen, wenn es ein Kindelement eines e-ELementes ist.
<html lang="de">
<head>
<title>Der Kindselektor</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
p>em {color:green;}
</style>
</head>
<body>
<h1>Der <em>Kind</em>selektor</h1>
<p><em>Dieses</em> Beispiel zeigt die Wirkung des <del><em>Nachbar</em></del> Kindselektors.</p>
</body>
</html>
Das em-Element der Überschrift ist ein Kind des h1-Elementes und nicht des p-Elementes. Das em-Element innerhalb des del-Elementes ist ist ebenfalls kein Kindelement von p. Die Folge der Befehlsanweisung ist, dass das Wort "Dieses" kursiv in grüner Farbe wiedergegeben wird.
Nachfahrenselektor
Nachfahrenselektor: e f
Werden zwei Selektoren durch den Kombinator " " (Leerzeichen) verbunden, so wird das Element f nur dann angesprochen, wenn es ein Nachfahrenelement eines e-Elementes ist. Dabei muss es kein direktes Element sein, sondern nur im Elementbaum notiert sein.
<html lang="de">
<head>
<title>Der Nachfahrenselektor</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
p em {color:green;}
</style>
</head>
<body>
<h1>Der <em>Kind</em>selektor</h1>
<p><em>Dieses</em> Beispiel zeigt die Wirkung des <del><em>Nachbar</em></del> Kindselektors.</p>
</body>
</html>
Das em-Element der Überschrift gehört nicht zum Elementbaum von p. Deshalb werden die Begriffe "Dieses" und "Nachbar" in grüner Farbe wiedergegeben.
Nachbarselektor
Nachbarselektor: e + f
Werden zwei Selektoren durch den Kombinator " +" (Pulszeichen) verbunden, so wird das Element f nur dann angesprochen, wenn es im Elementbaum direkt auf ein e-Elementes folgt.
<html lang="de">
<head>
<title>Der Nachbarselektor</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
h1+p {color:blue;}
p+p {color:green;}
</style>
</head>
<body>
<h1>Der Nachbarselektor</h1>
<p>Erster Abschnitt (blau)</p>
<p>Zweiter Abschnitt (grün)</p>
<p>Dritter Abschnitt (grün)</p>
<div>Ein EInschub</div>
<p>Vierter Abschnitt (normal</p>
</body>
</html>
Der vierte Abschnitt ist Nachbar eines div-Elementes und ändert damit nichtr seine Farbe.
Geschwisterselektor
Geschwisterselektor: e~f
Werden zwei Selektoren durch den Kombinator " ~" (Tilde) verbunden, 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.
<html lang="de">
<head>
<title>Der Geschwisterselektorselektor</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
h1~p {font-weight:bold;}
</style>
</head>
<body>
<p>ErsterAbsatz</p>
<h1>Der Geschwisterselektorselektor</h1>
<p>Erster Abschnitt (fett)</p>
<p>Zweiter Abschnitt (fett)</p>
<hr>
<p>Dritter Abschnitt (fett)</p>
</body>
</html>
Der vierte Abschnitt ist Nachbar eines div-Elementes und ändert damit nichtr seine Farbe.