CSS-Quiz: Selektoren – Teil 1

Die einfachen Selektoren

CSS 2.1 kennt fünf einfache Selektoren: den Typselektor, der ein Element bei seinem Namen nennt; den Universalselektor, der jedes Element trifft; den Attributselektor in vier Ausprägungen; den Klassenselektor mit vorangestelltem Punkt; und den Kennungsselektor mit vorangestelltem Nummernzeichen. Sie lassen sich ohne Trennzeichen aneinanderreihen, und dann müssen alle Bedingungen zugleich zutreffen.

Der Universalselektor darf dabei vor einem anderen einfachen Selektor stehen, ohne etwas zu ändern – die beiden Schreibweisen mit und ohne Stern vor einer Kennung sind gleichwertig und beide gültig. Zur Spezifität trägt er nichts bei, was ihn für Regeln nützlich macht, die leicht überschreibbar bleiben sollen.

Der Klassenselektor ist in HTML eine Kurzform des Attributselektors für eine Klasse, mit einem Unterschied: Er prüft, ob die Klasse in der Liste vorkommt, während ein einfacher Attributvergleich den gesamten Attributwert vergleicht. Ein Element mit zwei Klassen wird deshalb vom Klassenselektor getroffen und vom Attributvergleich auf einen der beiden Namen nicht.

Die drei Kombinatoren

Zwischen zwei einfachen Selektoren steht ein Kombinator, und CSS 2.1 kennt drei. Ein Leerzeichen bedeutet Nachfahre: irgendwo unterhalb, beliebig tief. Ein Größerzeichen bedeutet Kind: unmittelbar darunter, genau eine Ebene. Ein Pluszeichen bedeutet benachbartes Geschwister: das nächste Element auf derselben Ebene.

Der Nachfahrenselektor ist der am häufigsten falsch verstandene, weil das Trennzeichen unsichtbar ist. Er trifft alle passenden Nachfahren, nicht nur die unmittelbaren – eine Regel für Listenpunkte in einer Liste erwischt damit auch die einer verschachtelten Liste. Wer das nicht will, nimmt den Kindselektor.

Zur Spezifität tragen die Kombinatoren nichts bei. Zwei Selektoren mit denselben einfachen Bestandteilen wiegen gleich schwer, egal ob sie mit Leerzeichen oder Größerzeichen verbunden sind – Genauigkeit und Gewicht sind in CSS zwei verschiedene Dinge. Ein vierter Kombinator für ein späteres, nicht unmittelbar benachbartes Geschwister kam erst mit Selectors Level 3 hinzu.

Pseudoklassen und Pseudoelemente unterscheiden

Beide beginnen in CSS 2.1 mit einem Doppelpunkt, tun aber Verschiedenes. Eine Pseudoklasse wählt ein vorhandenes Element nach einem Zustand oder einer Position aus, die im Dokument nicht als Attribut steht: besucht, unter dem Zeiger, mit Fokus, erstes Kind, eine bestimmte Sprache. Ein Pseudoelement dagegen formatiert einen Teil eines Elements, den es als eigenes Element gar nicht gibt: die erste Zeile, den ersten Buchstaben, erzeugten Inhalt davor und danach.

Um beide auseinanderzuhalten, schreibt man Pseudoelemente seit Selectors Level 3 mit zwei Doppelpunkten. Die alte Schreibweise mit einem bleibt für die vier Pseudoelemente aus CSS 2.1 gültig; für alles Neuere gilt ausschließlich die doppelte.

Die vier Zustandspseudoklassen für Verweise haben dieselbe Spezifität, weshalb ihre Reihenfolge im Stylesheet entscheidet. Die überlieferte Folge lautet unbesucht, besucht, unter dem Zeiger, gedrückt. Soll ein besuchter Verweis genauso aussehen wie ein unbesuchter, werden beide Zustände in einer Selektorliste zusammengefasst und mit derselben Deklaration versehen – ganz weglassen kann man den besuchten Zustand nicht, weil das Vorgabe-Stylesheet ihn setzt.

Wie viele Kennungen ein Dokument haben darf

Ein Wert einer Kennung darf im Dokument nur einmal vorkommen – das ist eine Regel des Dokumentformats, nicht von CSS. Die Zahl der Kennungen insgesamt ist dagegen unbegrenzt: Jedes Element darf eine haben, solange keine zwei denselben Wert tragen.

Verstößt ein Dokument dagegen, bricht nichts sichtbar zusammen. Der Selektor trifft weiterhin alle Elemente mit diesem Wert, denn CSS wählt nach dem Attribut und nicht nach Eindeutigkeit. Was bricht, ist alles andere: Ein Sprungziel führt nur zum ersten, eine Beschriftung ordnet sich nur dem ersten zu, und eine Verknüpfung für die Sprachausgabe zeigt ebenfalls nur auf den ersten.

Daraus folgt die Faustregel, die viel Streit erspart: Eine Kennung wird vergeben, weil ein anderer Teil des Dokuments auf das Element zeigen muss – ein Sprungziel, eine Beschriftung, eine Verknüpfung –, und nicht, weil es eingefärbt werden soll. Wer nur gestalten will, nimmt eine Klasse und hält die Spezifität flach.

Wer diese Runde durchgearbeitet hat, kennt den vollständigen Bestand an Selektoren von CSS 2.1 – fünf einfache, drei Kombinatoren, sieben Pseudoklassen, vier Pseudoelemente. Alles Spätere baut darauf auf und ändert an der Systematik nichts; die Übersicht dazu steht in Selektoren ab Level 3, die Kapitelseite in der Schnellreferenz.

Ein Hinweis noch zur Schreibweise: Selektoren sind in HTML für Elementnamen unempfindlich gegenüber Groß- und Kleinschreibung, für Klassen und Kennungen dagegen empfindlich. Zwei Schreibweisen desselben Klassennamens sind zwei verschiedene Klassen, und der Fehler ist beim Lesen kaum zu sehen – wer durchgehend klein schreibt, umgeht eine ganze Fehlerfamilie.