CSS-Quiz: Selektoren – Teil 2

Selektoren gruppieren – und was dabei schiefgeht

Mehrere Selektoren, durch Kommas getrennt, teilen sich einen Deklarationsblock. Drei Überschriften mit derselben Schrift zu versehen ist damit eine Regel statt dreier, und eine Änderung findet an einer Stelle statt.

Die Gruppierung hat aber eine Eigenheit, die teuer werden kann: Versteht der Browser einen einzigen Selektor der Liste nicht, verwirft er die gesamte Regel mit allen anderen Selektoren. Ein neuer Selektor in einer Gruppe mit alten macht also alle Deklarationen unwirksam – in Browsern, die den neuen nicht kennen, und damit genau dort, wo man den Rückfall gebraucht hätte.

Deshalb gehören neue Selektoren in eine eigene Regel. Die logische Pseudoklasse aus Selectors Level 4 löst das Problem an der Wurzel, weil sie eine unbekannte Auswahl in ihrem Inneren verzeiht, ohne die umgebende Regel mitzureißen. Und für die Spezifität gilt bei einer Gruppe: Jeder Selektor der Liste zählt für sich – die Gruppierung ist eine reine Schreiberleichterung und ändert an der Kaskade nichts.

Warum die Kennung und der Attributvergleich nicht dasselbe sind

Ein Kennungsselektor und ein Attributvergleich auf dieselbe Kennung treffen dieselben Elemente – und wiegen verschieden schwer. Der Kennungsselektor zählt in der ersten Position des Tupels, der Attributvergleich in der zweiten, dort wo auch Klassen und Pseudoklassen zählen. Der Unterschied ist also nicht die Auswahl, sondern das Gewicht.

Genau darin liegt der praktische Nutzen: Wer eine Kennung ansprechen muss, weil sie im Dokument nun einmal vergeben ist, aber die Spezifität nicht anheben will, nimmt den Attributvergleich. Das hält die Regel auf derselben Stufe wie alle anderen und erspart den Wettlauf, den ein Kennungsselektor auslöst.

Ein zweiter Unterschied betrifft die Groß- und Kleinschreibung: In HTML wird der Wert eines Kennungsattributs unterschieden, und beide Formen verhalten sich hier gleich. Bei anderen Attributen hängt es vom Attribut ab, und für Fälle, in denen es nicht darauf ankommen soll, gibt es seit Selectors Level 4 einen eigenen Zusatz im Attributselektor.

Mehrere Klassen an einem Element

Ein Element kann beliebig viele Klassen tragen; im Dokument werden sie durch Leerzeichen getrennt in ein einziges Attribut geschrieben. Im Stylesheet werden sie ohne Trennzeichen aneinandergehängt, wenn beide zugleich zutreffen sollen – mit einem Leerzeichen dazwischen wäre daraus ein Nachfahrenselektor, und das ist der klassische Tippfehler an dieser Stelle.

Die Trennung in Grundform und Abwandlung ist der übliche Grund für mehrere Klassen: eine Klasse, die sagt, was das Element ist, und eine zweite, die eine Abweichung benennt. Beide Regeln liegen dann auf derselben Spezifitätsstufe, und die Reihenfolge im Stylesheet entscheidet – weshalb die Abwandlung hinter der Grundform stehen muss.

Die Reihenfolge der Klassen im Dokument spielt dagegen keine Rolle. Sie ist eine ungeordnete Menge, und kein Selektor kann auf sie zugreifen. Wer also aus der Reihenfolge im Attribut eine Bedeutung ableiten will, baut auf etwas, das CSS nicht kennt.

Der Nachbarselektor und seine Grenzen

Das Pluszeichen zwischen zwei Selektoren trifft ein Element, das unmittelbar auf ein anderes folgt und denselben Elternteil hat. Damit lässt sich eine Überschrift ansprechen, die direkt hinter einer höherrangigen steht, oder der erste Absatz nach einer Überschrift – Bedingungen, die sich im Dokument sonst nur mit einer zusätzlichen Klasse ausdrücken ließen.

Unmittelbar heißt dabei: kein anderes Element dazwischen. Reiner Text und Kommentare stören nicht, ein weiteres Element schon. Für eine Reihe direkt aufeinanderfolgender Absätze bedeutet das, dass jeder außer dem ersten getroffen wird, wenn man Absatz auf Absatz folgen lässt – eine kompakte Art, Zwischenräume nur zwischen den Absätzen zu setzen und nicht vor dem ersten.

Was der Nachbarselektor nicht kann, ist rückwärts schauen: Ein Element aufgrund dessen auszuwählen, was vor ihm oder in ihm steht, war in CSS 2.1 unmöglich. Erst der später hinzugekommene Selektor für den Inhalt eines Elements löst das – bis dahin blieb nur ein Skript oder eine zusätzliche Klasse.

Für die Praxis heißt das: Bedingungen, die sich aus der Nachbarschaft ergeben, gehören ins Stylesheet und nicht als Klasse ins Dokument – sie bleiben dann richtig, wenn Absätze hinzukommen oder wegfallen. Nur wo die Bedingung keine strukturelle ist, sondern eine inhaltliche, ist eine Klasse die ehrlichere Lösung. Der Grundlagenartikel zur Spezifität zeigt, was die Wahl für das Gewicht der Regel bedeutet.