:has()-Relationspseudo-Klasse

Die Pseudo-Klasse :has() wählt ein Element aus, wenn es einen Nachfahren enthält, der dem Argument entspricht. Sie wird oft als „Elternselektor“ bezeichnet und ermöglicht es, ein Elternelement anhand seiner untergeordneten Elemente zu formatieren – eine Fähigkeit, die CSS zuvor nicht hatte.

.card:has(img) wählt jedes .card-Element aus, das einen img-Nachfahren enthält. Das Argument ist eine Liste relativer Selektoren – jeder gültige CSS-Selektor, der Elemente relativ zum Zielelement beschreibt.

Formatieren Sie einen Formular-Container, wenn er ein ungültiges Eingabefeld enthält: form:has(:invalid) { border-color: red; }. Formatieren Sie einen Abschnitt, der eine Überschrift enthält: section:has(h2) { padding-top: 2rem; }. Das Elternelement ändert sein Erscheinungsbild abhängig vom Zustand der untergeordneten Elemente.

:has() kann vorhergehende Geschwister auswählen – etwas, das + und ~ nicht können. h2:has(+ p) wählt h2-Elemente aus, auf die unmittelbar ein p-Element folgt. li:has(~ .active) wählt li-Elemente aus, die ein nachfolgendes .active-Geschwisterelement haben.

Reagieren Sie ohne JavaScript auf die native Gültigkeit von Formularen: input:has(~ .error-msg) formatiert ein Eingabefeld mit einer Geschwister-Fehlermeldung. label:has(+ input:required) formatiert Beschriftungen, deren zugehöriges Eingabefeld erforderlich ist – alles allein mit CSS.

Heben Sie Navigationscontainer anhand eines aktiven untergeordneten Elements hervor: nav:has(.active) wendet Stile auf die gesamte Navigation an, wenn ein beliebiges untergeordnetes Element die Klasse active besitzt. Das ist nützlich, um auf Containerebene den aktuell ausgewählten Navigationsbereich anzuzeigen.

.grid:has(.card:focus-within) formatiert das gesamte Grid, wenn eine beliebige Karte den Tastaturfokus erhält. .dropdown:has(:hover) hält ein Dropdown geöffnet, solange der Mauszeiger über einem beliebigen Nachfahren liegt – klarer als komplexe Ketten von Geschwisterkombinatoren.

.sidebar:has(nav) wendet ein anderes Layout an als .sidebar:not(:has(nav)). Bedingte Layouts ohne JavaScript: Das Vorhandensein oder Fehlen bestimmter untergeordneter Elemente steuert das Layout des Elternelements und ermöglicht wirklich adaptive, inhaltsbewusste CSS-Layouts.

:has() mit breit gefassten Argumentselektoren (z. B. :has(*)) kann aufwendig sein – der Browser muss jedes Element prüfen. Halten Sie die Argumente von :has() spezifisch. Bevorzugen Sie nach Möglichkeit :has(> .specific-child) (direktes untergeordnetes Element) gegenüber :has(.specific-child) (beliebiger Nachfahre).

:has() wird von Chrome 105+, Safari 15.4+ und Firefox 121+ unterstützt. Seit Ende 2023 besteht vollständige Baseline-Unterstützung. Es gibt kein Polyfill (dafür wäre JavaScript zur Simulation erforderlich) – verwenden Sie die Funktion bei älteren Browsern mit Progressive Enhancement, wenn sie nicht kritisch ist.

Muster, die zuvor JS-Event-Listener erforderten: „Klasse zum Elternelement hinzufügen, wenn ein untergeordnetes Element fokussiert ist“, „Overlay anzeigen, wenn ein Modal-Trigger vorhanden ist“, „ein Grid anders formatieren, wenn es genau drei Elemente enthält“. :has() erledigt all diese Aufgaben deklarativ.

Was macht :has() im Vergleich zu vorhandenen CSS-Kombinatoren wie + und ~ einzigartig?

:has() ist die erste echte relationale Pseudo-Klasse von CSS und ermöglicht die Auswahl von Elternelementen und vorhergehenden Geschwisterelementen. Sie ermöglicht inhaltsgesteuerte Formatierung, Reaktionen auf Formularzustände, das Hervorheben der Navigation und viele Muster, die zuvor JavaScript-Manipulationen am DOM erforderten – alles deklarativ in CSS.