CSS 2.1: Strukturelle Pseudoklasse

Pseudoklasse `:first-child`:

Diese Pseudoklasse ermöglicht es, das erste Kindelement eines beliebigen Elements anzusprechen. Kindelemente erscheinen zwar im Baumdiagramm eines Dokuments, aber die Information, ob sie 'erstes', 'zweites' usw. sind, ist dort nicht enthalten.

Diese Klasse ist anwendbar auf alle Elemente mit Ausnahme von anonymen Boxes. Da diese im Dokumentstammbaum nicht auftreten, werden sie nicht als Nachfahrenelemente mitgezählt.

Code-Beispiel:

Dieses Beispiel gilt nicht generell für das erste P-Element innerhalb eines DIV-Elementes, sondern für das erste Kindelement, falls es ein P-Element ist.

DIV > P:first-child { font-weight: bold; }

Browserunterstützung

Die Pseudoklasse :first-child wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x, IE/Win 6: MS IE/Win bis Version 6 erkennen die Pseudoklasse :first-child noch nicht.
IE/Mac 5.x dagegen erkennt sie bereits.
IE 7:: Von Version 7 an hat Microsoft die Verarbeitung dieser Pseudoklasse ermöglicht.

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

Diese Pseudo-Klasse ist nicht Teil des Standards CSS Mobile Profile 1.0. Auch von einer Umsetzung durch einzelne Mobilgeräte ist nichts bekannt.

Ausblick:

CSS3 konzentriert sich nicht so sehr auf die Erweiterung bestehender Pseudoklassen, sondern eher darauf, neue Pseudoklassen zu entwickeln, die dem Besucher mehr Interaktionsmöglichkeiten und dem Webautor mehr Möglichkeiten zur Auszeichnung von Teilen des Dokuments bieten, die nicht im Dokumentstammbaum auftreten.

Im Konzept, n-te Kindelemente eines Elements durch Pseudoklassen zu erfassen, ist in CSS 3 durch die Einführung der strukturellen Pseudoklassen eine besondere Erweiterung geplant.