Wann werde ich jemals einen Kind-Selektor benutzen? Ich kenne so viele Selektoren, dass ich im Prinzip auf jedes Seitenelement zugreifen kann. Warum sollte ich also einen weiteren lernen?

Allerdings gibt es im Webdesign eine Herausforderung, bei der Kind-Selektoren unschlagbar sind und die auf mehr Websites vorkommt, als Sie denken. Jedes Mal wenn Sie mit verschachtelten, ungeordneten Listen (wie in der Abbildung oben) arbeiten, können Sie Kind-Selektoren verwenden, um diese Kategorien und Unterkategorien visuell voneinander zu unterscheiden. Sie können die erste Ebene der Einträge anders gestalten als die zweite usw. Auf diese Weise präsentierte Inhalte wirken aufgeräumt, professionell und lesbar (und Ihre Besucher werden Sie dafür lieben).

Legen Sie hierfür zuerst eine klassenbasierte Stildefinition für die oberste Listenebene an, z.B. mit dem Namen .hauptListe. Für diese Ebene soll eine serifenlose Schrift (sans-serif, z.B. Helvetica oder Arial) verwendet werden, die etwas größer ist als der übrige Text, vielleicht fett oder in einer anderen Farbe. Die folgenden Ebenen erhalten eine kleine Schriftgröße, dafür aber eine Serifenschrift (z.B. Times), um die Lesbarkeit zu erhöhen.
Gerade bei viel Text hilft es, die einzelnen Unterkategorien unterschiedlich zu gestalten, damit sich Ihre Benutzer leichter zurechtfinden.
Weisen Sie nun dem ersten <ul>-Element die Klasse hauptListe zu: <ul class=“hauptListe“>. Dann verwenden Sie einen Kind-Selektor, um die erste Gruppe von Kind-Elementen auszuwählen und ihnen den gewünschten Stil für die erste Unterkategorie zuzuweisen: ul.hauptListe > li. Diese Stilregeln werden nur für Listenelemente angewandt, die Kind-Elemente des <ul>-Tags sind, dem wir zuvor den Stil .hauptListe zugewiesen haben. Für Unterlisten werden diese Regeln nicht angewandt. Sie können diesen mit den entsprechenden Kind-Selektoren also eigene Stile zuordnen. Um beispielsweise die <li>-Tags der ersten Unterliste anzusprechen, verwenden Sie den Selektor ul.haupt- Liste > li > ul > li. (Ein einfacher Nachkommen-Selektor wie ul li hätte dagegen alle Listenelemente aller ungeordneten Listen auf der Seite ausgewählt.)

Auszug aus dem neuerschienenen CSS Missing Manual von David Sawyer McFarland.