CSS 2.1 · Pseudoklasse
Pseudoklasse Strukturelle Pseudoklasse
Vollreferenz zu Strukturelle Pseudoklasse aus CSS 1 und CSS 2.1 mit Syntax, Bedeutung, Beispiel und Browserunterstützung.
Strukturelle Pseudoklasseli:first-child { outline: 2px solid #7A2FB0; }
Überschrift
Erster Absatz direkt nach der Überschrift, mit einem Link und einem Zitat
.
Zweiter Absatz, Klasse extra.
- Erster Listenpunkt
- Zweiter Listenpunkt mit Link
- Dritter Listenpunkt
Dritter Absatz, ohne Klasse.
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-childnoch 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.
Was als Kind gezählt wird
Gezählt werden ausschließlich Elemente. Text zwischen den Elementen zählt nicht mit, Kommentare ebenso wenig, und Zeilenumbrüche im Quelltext sind bedeutungslos. Ein Absatz bleibt also erstes Kind, auch wenn vor ihm eine Leerzeile und ein Kommentar stehen.
Ein Element, das das einzige Kind ist, ist immer auch das erste. Und weil anonyme Boxen im Dokumentbaum nicht auftreten, werden sie nicht mitgezählt, was die Seite ausdrücklich festhält.
Die Pseudoklasse fragt nach der Stellung im Baum und nicht nach der Darstellung. Ein Element, das per Positionierung an einer anderen Stelle erscheint, bleibt in der Zählung dort, wo es im Quelltext steht.
Die Falle im Beispiel
Der Hinweis auf dieser Seite lohnt eine genauere Betrachtung. div > p:first-child trifft
nicht den ersten Absatz in einem Bereich, sondern das erste Kind, sofern dieses ein Absatz ist. Steht
davor eine Überschrift, greift die Regel nicht, obwohl der Absatz für den Leser der erste ist.
Das ist keine Ungenauigkeit im Entwurf, sondern die Bedeutung der Pseudoklasse: sie sagt etwas über die Stellung, nicht über den Typ. Wer den ersten Absatz unabhängig davon meint, was vor ihm steht, braucht eine Pseudoklasse, die nach Elementtypen zählt, und die kam erst mit einer späteren Fassung der Selektoren.
Der Fehler ist deshalb hartnäckig, weil er selten sofort auffällt. Solange der Absatz zufällig an erster Stelle steht, funktioniert alles; erst wenn jemand eine Überschrift ergänzt, verschwindet die Formatierung, und die Ursache liegt an einer ganz anderen Stelle als die Änderung.
Eine Pseudoklasse und ihre spätere Familie
CSS 2.1 kennt an dieser Stelle nur diese eine Pseudoklasse. Das Gegenstück für das letzte Kind fehlt ebenso wie jede Möglichkeit, das dritte oder jedes zweite anzusprechen. Wer damals eine Tabelle zeilenweise einfärben wollte, musste jeder zweiten Zeile im Dokument eine Klasse geben.
Die spätere Fassung der Selektoren hat die Lücke geschlossen und eine ganze Gruppe hinzugefügt: für das letzte Kind, für das einzige, für die Zählung nach Formeln und für dieselben Fragen bezogen auf Elemente desselben Typs. Damit wurden Muster möglich, für die vorher der Umweg über das Dokument nötig war.
An der hier beschriebenen Pseudoklasse hat sich dabei nichts geändert. Sie ist der Anfang dieser Familie und die einzige daraus, die auch in Stylesheets aus der Zeit von CSS 2.1 vorkommt.
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.
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.