Pseudoklassen

Pseudoklassen sind Selektoren in CSS, die Elemente aufgrund ihres Zustands oder ihrer Beziehung zu anderen Elementen auswählen. Sie erweitern die einfache Klassen- oder ID-Auswahl um Zustände wie das Benutzerverhalten oder strukturelle Positionen. Im Gegensatz zu Pseudo-Elementen, die erzeugte, nicht real vorhandene Inhalte adressieren (etwa ::before oder ::after), greifen Pseudoklassen direkt auf echte DOM-Elemente zu.

Zu den häufig verwendeten Zustands-Pseudoklassen gehören :hover, :active und :focus, mit denen sich das Aussehen beim Überfahren der Maus, beim Klicken oder beim Fokus durch Tastatur steuern lässt. Weitere wichtige Zustandsklassen sind :visited, :link, :enabled, :disabled, :checked und :indeterminate. Für Text- oder Formfelder gibt es :focus-within (wenn ein Kind den Fokus hat) und :focus-visible (sichtbare Fokussierung).

Strukturelle Pseudoklassen wählen Elemente basierend auf ihrer Position im DOM, zum Beispiel :first-child, :last-child, :nth-child(n) und :nth-of-type(n). Weitere Optionen sind :only-child, :only-of-type und :empty. Die Negation wird durch :not() ermöglicht, z. B. Elemente, die nicht einem bestimmten Selektor entsprechen. Pseudoklassen wie :has() oder :where() gehören zu CSS Selectors Level 4, wobei :where() eine Null-Spezifizität hat und :has() relationalen Zugriff ermöglicht.

Anwendungsbeispiele umfassen das Hervorheben des aktuellen Links, das Stylen alternierender Listenelemente oder das Anpassen des Layouts, wenn ein Formularfeld fokussiert ist. Pseudoklassen sind in den meisten modernen Browsern gut unterstützt, wobei neuere Erweiterungen wie :has() je nach Browser variieren können. Sie bieten eine leistungsfähige, deklarative Methode zur dynamischen Stilgebung ohne zusätzliche Klassenlogik.