Der Child Selektor

Im vorherigen Kapitel haben wir gesehen, wie leistungsfähig der Descendant-Selektor sein kann, da Sie ALLE Kinder und Enkelkinder (und so weiter) eines oder mehrerer Elemente ansprechen können. Manchmal ist dies jedoch ZU mächtig - manchmal möchten Sie nur die direkten untergeordneten Elemente eines Elements ansprechen. Zum Glück hat CSS auch dafür einen Selektor!

Im vorherigen Kapitel hatten wir ein Beispiel mit einem Nachkommen-Selektor, der automatisch alle fett gedruckten Tags bis zum Ende der Hierarchie ansprach:

<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>

Die Syntax für die Verwendung des direkten untergeordneten Selektors sieht folgendermaßen aus:

eltern > kind

Das obige Beispiel neu zu schreiben, um nur direkte Kinder des div.highlighted-Tags zu beeinflussen, ist sehr einfach:

<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>
	<b>Level 0 again...</b>
</div>

Beachten Sie, wie wir jetzt haben, was wir wollten - nur direkte Kinder der Eltern sind jetzt betroffen.

Natürlich können Sie dem Selektor weitere Anforderungen hinzufügen, sowohl für den untergeordneten als auch für den "Kind" Typ. Nehmen Sie zur Veranschaulichung dieses Beispiel:

<style type="text/css">
div.highlighted > ul > li > a {
	color: DarkOrange;
}
</style>

<div class="highlighted">
	<ul>
		<li><a href="#">List Link 1</a></li>
		<li><a href="#">List Link 2</a></li>
		<ul>
			<li><a href="#">List Link 2.1</a></li>
		</ul>
		<li><a href="#">List Link 3</a></li>
	</ul>
</div>

Beachten Sie, dass ich die Auswahlregel soeben genauer als bisher festgelegt habe - anstatt nur auf z.B.: Links innerhalb des ".highlighted div" oder Links innerhalb einer Liste, ziele ich auf Links, die ein direktes Kind eines Listenelement-Tags sind, das ein direktes Kind einer ungeordneten Liste ist, das ein Kind eines div-Tags mit der "highlighted" Klasse ist. Auch wenn wir eine untergeordnete Liste in der Liste haben, werden deren Links von dieser Regel nicht beeinflusst. Wenn Sie eine andere Liste hinzufügen, die nicht in dem hervorgehobenen Div enthalten ist, wird dies ebenfalls nicht beeinflusst.

Zusammenfassung

Der untergeordnete Selektor ist eine spezifischere Version des untergeordneten Selektors, was ihn jedoch nicht weniger leistungsfähig macht. Es ist sehr wahrscheinlich, dass Sie auf Situationen stoßen, in denen einer von beiden Ihnen helfen kann, Ihren CSS-Code zu vereinfachen!