CSS: The Definitive Guide, 5. Auflage

Kapitel 3. Pseudo-Klassen- und -Element-Selektoren

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Im vorigen Kapitel hast du gesehen, wie Selektoren ein einzelnes Element oder eine Sammlung von Elementen mit relativ einfachen Ausdrücken, die HTML-Attributen im Dokument entsprechen, anpassen können. Das ist toll, wenn du nur die Attribute auswählst, aber was ist, wenn du einen Teil des Dokuments anhand seines aktuellen Zustands oder seiner Struktur auswählst? Oder wenn du alle Formularelemente auswählen willst, die deaktiviert sind, oder die für das Absenden des Formulars erforderlich sind, um es zuzulassen? Für diese und viele andere Fälle gibt es in CSS die Selektoren pseudo-class und pseudo-element.

Pseudoklassen-Selektoren

MitPseudoklassen-Selektoren kannst du Stile zuweisen, die aus dem Zustand bestimmter Elemente oder Auszeichnungsmuster im Dokument oder sogar aus dem Zustand des Dokuments selbst abgeleitet werden.

Der Begriff Phantomklassen mag etwas seltsam klingen, aber so kann man sich am besten vorstellen, wie Pseudoklassen funktionieren. Nehmen wir zum Beispiel an, du möchtest jede zweite Zeile einer Datentabelle hervorheben. Dazu könntest du jede zweite Zeile mit etwas wie class="even" markieren und dann CSS schreiben, um die Zeilen mit dieser Klasse hervorzuheben - oder (wie du gleich sehen wirst) du könntest einen Pseudoklassen-Selektor verwenden, um denselben Effekt zu erzielen. ...