Der Descendant Selector

Bisher haben wir nur Selektoren verwendet, die direkt auf ein bestimmtes Element oder Elemente mit einer bestimmten ID oder Klasse abzielen. Insbesondere Zielelemente eines bestimmten Typs, z.B.: Alle Links oder Bilder, denn sie sind sehr mächtig, aber was ist, wenn Sie dies einschränken möchten, zum Beispiel auf Elemente, die nur in einem bestimmten Teil der Seite zu finden sind? Hier kommen Kombinatoren ins Spiel, eine Reihe von Auswahltypen, die die Hierarchie der Elemente auf Ihrer Seite verwenden, um die Zielelemente einzuschränken.

In diesem Kapitel befassen wir uns mit dem Descendant selector, mit dem Sie die Zielelemente auf diejenigen beschränken können, die Nachkommen eines anderen Elements sind. Die Syntax ist sehr einfach: Sie schreiben einfach die übergeordneten Elemente, trennen sie mit einem Leerzeichen und geben dann das eigentliche Element an, auf das Sie abzielen möchten. Hier ist ein Beispiel:

<style type="text/css">
p b {
	color: Blue;
}
</style>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

Hello, <b>world</b> - what a <b>beautiful</b> day!

In diesem Beispiel sollen alle fett gedruckten Elemente blau sein, jedoch nur, wenn sie sich in einem Absatz-Tag befinden. Wenn Sie das Beispiel ausprobieren, werden Sie feststellen, dass, während das fette Tag viermal verwendet wird, nur die ersten beiden blau sind - das liegt daran, dass sie sich in einem Absatz befinden, den unser Descendant-Selektor benötigt!

Dies ist natürlich ein sehr einfaches Beispiel, aber denken Sie an das Gesamtbild. So können Sie zum Beispiel leicht die Farbe aller Links in Ihrem Hauptmenü ändern, ohne sie alle mit einer bestimmten Klasse markieren zu müssen!

Natürlich können Sie alle üblichen Modifikatoren verwenden, um Ihren Selektor auf bestimmte Klassen oder IDs zu beschränken, wie im folgenden Beispiel:

<style type="text/css">
p.highlighted b {
	color: Blue;
}
</style>

<p class="highlighted">Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

Hier zielen wir nur auf fett gedruckte Elemente ab, die Nachkommen eines Absatzes mit der Klasse "hervorgehoben" sind.

Ein Nachkomme muss nicht das direkte Kind sein

Bei diesem Auswahltyp sollten Sie sich bewusst sein, dass nicht nur direkte Kinder angesprochen werden, sondern auch Kinder des Kindes (Enkelkinder) usw., und zwar in der gesamten Hierarchie. Dieses Beispiel soll zeigen, dass es in Ordnung ist:

<style type="text/css">
div.highlighted b {
	color: Blue;
}
</style>

<div class="highlighted">
	<b>Level 0...</b>
	<div>
		<b>Level 1...</b>
		<div>
			<b>Level 2...</b>
		</div>
	</div>
</div>

Hier zielen wir auf fett gedruckte Elemente, die Nachkommen eines div-Tags mit der Klasse "markiert" sind. Wenn Sie das Beispiel ausprobieren, werden Sie feststellen, dass der letzte Satz fett gedruckter Tags zwar in mehrere Schichten von div-Tags eingeschlossen ist, jedoch immer noch von der Regel für blau fett gedruckte Tags betroffen ist. Wenn nur direkte Kinder betroffen sein sollen, benötigen Sie den Child-Selector, der in einem der nächsten Kapitel erläutert wird.

Zusammenfassung

Die Syntax für einen untergeordneten CSS-Selektor ist äußerst einfach: Schreiben Sie einfach die übergeordneten Selektoren, ein Leerzeichen und dann den Zielselektor. Trotz der Tatsache, dass es so einfach zu bedienen ist, ist es auch extrem leistungsfähig. Hoffentlich haben Sie das bereits aus den Beispielen in diesem Artikel gelernt, aber wenn nicht, lesen Sie einfach weiter, um mehr darüber zu erfahren, was die erweiterten CSS-Selektoren für Sie tun können.