CSS 2.1: Nachfahren-Selektor (`descendant`)

Syntax:

E1 E2 { Deklarationen }

Ahnenelement E1 und Nachkommenelement E2 sind durch einen Leerraum voneinander getrennt.

Bedeutung:

(descendant = Nachkomme)

Die Deklarationen gelten für jedes Element E2, das innerhalb des Dokumentstammbaums ein Nachkomme des Ahnen-Elementes E1 ist. Es spielt keine Rolle, wieviel Generationen zwischen beiden Elementen liegen. Die Elemente können im Kontext zur Blockformatierung oder zur Inline- Formatierung stehen.

Beispiele:

Zu Beginn ein Beispiel, das bewirkt, dass alle Elemente EM innerhalb des Dokuments mit grünem Hintergrund dargestellt werden:

BODY EM { background-color: #0c0; }

Das folgende Beispiel macht das Zusammenspiel zwischen Nachfahrenselektor, Klassenselektor und Pseudoklassen deutlich: Die erste Regel bewirkt, dass alle besuchten Links, die das Klassenattribut class haben, dunkelblau dargestellt werden. So lassen sich Links innerhalb desselben Webdokuments verschiedenartig darstellen.

Die zweite Regel gilt für alle besuchten Links, wenn ein beliebiges Vorfahrenelement die Klasse class hat. Anstelle eines Klassenselektors wäre hier auch ein ID-Selektor möglich. Damit kann man die Darstellung der Links direkt davon abhängig machen, in welchem Teil des Webdokuments sie sich befinden.

Die dritte Regel soll zeigen, was durch einen einfachen Fehler passieren kann. Hier werden nicht die besuchten Links in blau dargestellt, sondern alle Links, für die die Klasse visited notiert ist.

A.class:visited { color: navy; }
.class A:visited { color: navy; }
.class A.visited { color: navy; }

Im nächsten Beispiel werden alle P-Elemente angesprochen, die zwei Generationen oder weiter unterhalb eines DIV im Dokumentstammbaum stehen:

DIV * P { Deklarationen }

Das letzte Beispiel ist ebenfalls mehr abstrakter Art. Es soll den kleinen aber wichtigen Unterschied zum Kindselektor deutlich machen. Die erste Regel gilt für alle Listenpunkte, die (in welcher Generation auch immer) Nachfahren eines Elements UL sind, das wiederum Nachfahre eines Elements OL ist. Die Listenpunkte können Elemente der ungeordneten Liste sein, sie können aber auch zu einer weiteren Liste gehören, die in der UL verschachtelt ist.

Die zweite Regel gilt nur für Listenpunkte in ungeordneten Listen und hat keinen Einfluß auf geordnete Listen, die noch darin geschachtelt sein könnten:

OL UL LI { Deklarationen }
OL UL>LI { Deklarationen }

Browserunterstützung

: Der Nachfahren-Selektor wird von allen modernen Browsern erkannt.

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. Es sind keine Einschränkungen bei der Umsetzung des Universalselektors durch Mobilgeräte bekannt.