Selektor Kind-Selektor (child)

ul > li {
  outline: 2px solid #7A2FB0;
}

E1 > E2 { Deklarationen }

Beispiele

Das erste Beispiel gilt für eine geordnete Liste, die Kind-Element von einem DIV ist.

Das zweite Beispiel gilt ebenfalls für eine geordnete Liste, die Kind-Element von einem DIV ist, aber nur, wenn das DIV selbst das erste Kindelement eines anderen Elementes ist.

DIV > OL { font-family: sans-serif; }

DIV:first-child > OL { font-family: sans-serif; }

Genau eine Ebene

Der Unterschied zum Nachfahren-Selektor liegt in einer einzigen Bedingung: das rechte Element muss unmittelbar unter dem linken hängen. Eine Ebene dazwischen genügt, damit die Regel nicht mehr greift.

Die klassische Anwendung ist die verschachtelte Liste. In einer Navigation, deren Untermenüs wiederum Listen sind, spricht nav > ul > li nur die oberste Ebene an. Mit dem Nachfahren-Selektor wäre jeder Eintrag jeder Tiefe getroffen, und die Regel müsste an der zweiten Ebene mühsam zurückgenommen werden.

Dasselbe gilt für alles, was sich selbst enthalten kann: Tabellen in Tabellen, Zitate in Zitaten, Abschnitte in Abschnitten. Überall dort ist die Beschränkung auf eine Ebene der Unterschied zwischen einer Regel, die tut, was sie soll, und einer, die sich fortpflanzt.

Genauigkeit gegen Haltbarkeit

Was den Selektor genau macht, macht ihn zugleich empfindlich. Wird zwischen die beiden Elemente später ein Container gesetzt, etwa ein Element für das Layout, ist die Beziehung zerbrochen und die Regel greift nicht mehr. Der Nachfahren-Selektor überstünde denselben Eingriff.

Zwischen beiden zu wählen heißt deshalb, zwischen zwei Risiken zu wählen. Der Nachfahren-Selektor trifft im Zweifel zu viel und wirkt an Stellen, an die niemand gedacht hat. Der Kind-Selektor trifft im Zweifel zu wenig und hört auf zu wirken, sobald sich die Auszeichnung ändert. Wo die Struktur bekannt und stabil ist, ist der genauere Selektor der bessere.

Zu beachten ist außerdem, dass nur Elemente als Kinder zählen. Text zwischen zwei Elementen, auch umfangreicher Text, ändert nichts an der Beziehung, ebenso wenig Kommentare oder Zeilenumbrüche im Quelltext.

Oft ist der Kind-Selektor auch dann die bessere Wahl, wenn die Verschachtelung gar nicht tief ist. Er sagt dem nächsten Leser des Stylesheets, dass hier eine bestimmte Struktur vorausgesetzt wird, und das ist eine Aussage, die ein Leerzeichen nicht macht.

Warum er lange kaum benutzt wurde

Der Kombinator steht seit CSS 2 im Standard, war aber in dem Browser, der lange die Mehrheit hatte, bis zu dessen Version 6 nicht umsetzbar. Wer ihn benutzte, schrieb eine Regel, die ein großer Teil der Leser nicht sah.

Das hatte eine bemerkenswerte Nebenwirkung: der Selektor wurde als Filter verwendet. Regeln, die nur moderne Browser erreichen sollten, wurden hinter einen Kind-Selektor gestellt, weil man sich darauf verlassen konnte, dass der ältere Browser sie überging.

Heute ist er überall vorhanden, und die Filterwirkung ist verschwunden. Geblieben ist die Zurückhaltung in manchen Stylesheets, die aus jener Zeit stammt und keinen Grund mehr hat.

Besonderheiten im Medientyp handheld

Dieser Selektor ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Der Kind-Selektor wird nicht von allen Mobilgeräten umgesetzt.