CSS 2.1: Kind-Selektor (`child`)

Syntax:

E1 > E2 { Deklarationen }

Den Leerraum um den '>'-Kombinator kann man zur besseren Übersicht einfügen, er ist aber nicht zwingend.

Bedeutung:

Dieser Selektor spricht jedes Element E2 an, das ein direktes Kindelement des Elementes E1 ist. Diese Anforderung ist also spezifischer als die Anforderung an allgemeine Nachkommenelemente.

Um genau das erste Kind-Element von E1 zu markieren, bietet sich die Pseudoklasse :first-child an.

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

Browserunterstützung

Die Eigenschaft wird von allen modernen Browsern unterstützt, mit folgender Ausnahme:

IE/Win 6:: MS IE/Win bis Version 6 erkennt den Kindselektor noch nicht. IE/Mac dagegen erkennt ihn.
IE 7:: Von Version 7 an kann der IE alle Selektoren verarbeiten.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

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.