Selektor Nachfahren-Selektor (descendant)

div p {
  outline: 2px solid #7A2FB0;
}

E1 E2 { Deklarationen }

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 }

Ein Kombinator, den man nicht sieht

Der Nachfahren-Selektor ist der einzige Kombinator, der aus einem Leerzeichen besteht. Das macht ihn bequem zu schreiben und schwer zu erkennen: .karte .titel und .karte.titel unterscheiden sich um ein Zeichen und bedeuten Verschiedenes. Das erste trifft einen Titel innerhalb einer Karte, das zweite ein Element, das beide Klassen zugleich trägt.

Ein versehentlich gesetztes oder gelöschtes Leerzeichen ist deshalb ein Fehler, den man beim Überfliegen nicht sieht. Er fällt nur dadurch auf, dass die Regel nichts trifft oder zu viel trifft.

Aus demselben Grund ist die Kette nicht auf zwei Glieder beschränkt. Jedes weitere Leerzeichen fügt eine Bedingung hinzu, und die Zwischenglieder müssen nicht unmittelbar aufeinanderfolgen.

Jedes Glied wiegt mit

Die Spezifizität eines Nachfahren-Selektors ist die Summe seiner Bestandteile. body em wiegt 0,0,0,2, .liste .eintrag a wiegt 0,0,2,1. Mit jedem Glied wird die Regel schwerer und damit schwerer zu überschreiben.

Das ist der praktische Grund für kurze Selektoren. Eine lange Kette beschreibt zwar genau, wo etwas gilt, verlangt aber für jede spätere Ausnahme eine noch längere Kette oder eine Klasse mit mehr Gewicht. Nach einigen Runden besteht ein Stylesheet aus Regeln, die einander überbieten.

Hinzu kommt, dass die Kette Annahmen über die Struktur festschreibt. Sie hält nur, solange die Verschachtelung so bleibt, wie sie ist. Zwei Glieder sind fast immer genug: eines für den Bereich, eines für das Element darin.

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.