:has() für Formularvalidierung: Eltern-Elemente gezielt stylen

1. Warum das Stylen von Eltern-Elementen bisher unmöglich war

CSS-Selektoren wie input:invalid stylen immer nur das Element, auf das sie direkt zutreffen, niemals eines seiner Vorfahren-Elemente. Für ein typisches Formular-Layout, bei dem ein <input> in einem umgebenden <div> zusammen mit Label und Icon steckt, reichte diese Regel nicht aus, um den kompletten Wrapper anhand des Validierungszustands des Eingabefelds zu färben.

Vor Einführung von :has() blieb dafür nur JavaScript übrig, das bei jedem relevanten Event eine Klasse wie .has-error auf den Wrapper setzte oder entfernte. Diese Lösung funktionierte, koppelte die visuelle Darstellung aber fest an eigenen Skriptcode, der bei jeder neuen Formularkomponente erneut geschrieben und gepflegt werden musste.

2. :has() als relationale Pseudo-Klasse kurz erklärt

Die Pseudo-Klasse :has() wird oft als der lange fehlende Eltern-Selektor bezeichnet, ist aber allgemeiner: Sie prüft, ob innerhalb des ausgewählten Elements irgendwo ein Element existiert, das dem übergebenen Selektor entspricht, egal wie tief verschachtelt. div:has(input:invalid) wählt also jedes div, das irgendwo in seinem Nachfahren-Baum ein ungültiges Eingabefeld enthält.

Diese Prüfung funktioniert live und aktualisiert sich automatisch, sobald sich der Validierungszustand des Kind-Elements ändert, genau wie jede andere CSS-Pseudo-Klasse auch. Es ist keine einmalige Prüfung beim Laden der Seite, sondern eine kontinuierlich neu bewertete Bedingung, die auf jede Tastatureingabe und jeden Fokus-Wechsel reagiert.

3. Rezept: Formularfeld-Wrapper anhand des Kind-Zustands stylen

Ein typisches Formularfeld besteht aus einem Wrapper-div, das ein Label, das eigentliche <input> und ein Fehler-Icon enthält. Mit .field:has(input:user-invalid) lässt sich der gesamte Wrapper inklusive Label-Farbe und Icon-Sichtbarkeit in einer einzigen Regel steuern, statt jedes Kind-Element einzeln mit eigenen Selektoren zu adressieren.

Wichtig ist die bewusste Wahl von :user-invalid statt :invalid innerhalb der :has()-Klammer, damit der gesamte Wrapper nicht schon beim Laden der Seite rot eingefärbt wird. Diese Kombination verbindet die Timing-Vorteile aus der interaktionsbasierten Validierung direkt mit der strukturellen Stärke von :has(), ohne dass beide Konzepte im Widerspruch zueinander stehen.

.field {
  border-inline-start: 3px solid transparent;
  padding-inline-start: 0.75rem;
  transition: border-color 0.15s ease;
}

.field:has(input:user-invalid) {
  border-inline-start-color: #dc2626;
}

.field:has(input:user-invalid) label {
  color: #dc2626;
  font-weight: 600;
}

.field:has(input:user-invalid) .field-icon {
  display: block;
  color: #dc2626;
}

.field:has(input:user-valid) {
  border-inline-start-color: #16a34a;
}

4. Rezept: ausgewählte Option in einer Radio- oder Checkbox-Gruppe hervorheben

Bei einer Gruppe von Radio-Buttons innerhalb eines <fieldset> lässt sich mit fieldset:has(input:checked) feststellen, ob überhaupt schon eine Option gewählt wurde, was sich gut eignet, um eine Mindestauswahl-Pflicht visuell zu unterstreichen, solange noch keine Auswahl getroffen wurde.

Präziser wird es mit einem Selektor auf der einzelnen Options-Zeile: .option:has(input:checked) hebt genau die eine ausgewählte Zeile einer Liste von Karten-artigen Radio-Optionen hervor, etwa mit einem farbigen Rahmen und einem leicht angehobenen Schatten, ohne dass JavaScript die Auswahl manuell nachverfolgen muss.

.option {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
  cursor: pointer;
}

.option:has(input:checked) {
  border-color: #4a1d96;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
  background-color: #f5f3ff;
}

fieldset:not(:has(input:checked)) .required-hint {
  display: block;
  color: #b45309;
}

5. Rezept: Passwort-Wrapper mit mehrstufiger Stärkeanzeige

Ein Passwortfeld-Wrapper kann mit mehreren :has()-Bedingungen kombiniert eine grobe Stärkeeinschätzung visualisieren, indem verschiedene pattern-Attribute auf unsichtbaren Hilfs-Eingaben oder direkt über :has(input:valid) in Kombination mit weiteren Attribut-Selektoren geprüft werden. Für die meisten Projekte reicht dabei eine einfache zweistufige Unterscheidung zwischen erfüllten und nicht erfüllten Mindestanforderungen.

Realistischer und wartbarer ist meist eine Kombination aus :has() für die Wrapper-Färbung mit einem serverseitig oder per pattern geprüften Mindestkriterium, während eine echte mehrstufige Stärkeberechnung, die verschiedene Kriterien gewichtet, weiterhin am besten in JavaScript bleibt. :has() ersetzt hier also nicht jede Logik, sondern übernimmt zuverlässig den rein visuellen Kopplungsteil zwischen Zustand und Wrapper-Darstellung.

6. Formularweite Zustände: Absende-Button und Sammel-Hinweis steuern

Über die Grenzen eines einzelnen Feldes hinaus lässt sich mit form:has(:user-invalid) feststellen, ob irgendein Feld im gesamten Formular aktuell ungültig ist und bereits bearbeitet wurde. Diese Bedingung eignet sich hervorragend, um einen zusammenfassenden Fehler-Banner am oberen Formularrand automatisch ein- und auszublenden, ohne dass ein einziges Skript den Formularzustand mitverfolgen muss.

Ebenso lässt sich der Absende-Button optisch als noch nicht bereit markieren, solange form:has(:invalid) zutrifft, unabhängig davon, ob die Felder schon bearbeitet wurden. Diese Kombination aus einem zurückhaltenden Button-Stil vor Interaktion und einer deutlichen Fehlermeldung nach Interaktion liefert ein rundes Gesamtbild, ganz ohne die beiden Zustände in JavaScript manuell zu synchronisieren.

7. Spezifität und Performance-Aspekte von :has()

In Bezug auf Spezifität verhält sich :has() wie andere funktionale Pseudo-Klassen: Die Spezifität entspricht der des spezifischsten Selektors innerhalb der Klammer, nicht der von :has() selbst. div:has(input:invalid) hat also dieselbe Spezifität wie div input:invalid, was bei der Priorisierung gegenüber anderen Regeln zu beachten ist.

Performance-technisch mussten Browser für :has() neue Optimierungsstrategien entwickeln, weil die Auswertung im Gegensatz zu den meisten anderen Selektoren nicht nur von einem Element ausgeht, sondern dessen gesamten Nachfahren-Baum durchsucht. In der Praxis bleibt das für typische Formular-Wrapper mit wenigen verschachtelten Ebenen unproblematisch, sollte aber bei sehr großen, tief verschachtelten Listen mit hunderten Elementen bewusst getestet werden, etwa mit den Performance-Werkzeugen der Browser-Entwicklertools, um echte Engpässe von rein gefühlter Verlangsamung zu unterscheiden.

8. Warum :has(:user-invalid) fast immer die bessere Wahl ist

Genau wie bei einem einzelnen Eingabefeld gilt für Wrapper-Elemente derselbe Grundsatz: :has(input:invalid) markiert den Wrapper bereits beim Laden der Seite, sobald ein Pflichtfeld leer ist, während :has(input:user-invalid) auf echte Nutzerinteraktion wartet. Für Formular-UX ist Letzteres praktisch immer die richtige Wahl, weil der Wrapper sonst genau dasselbe verfrühte Fehlerbild zeigt, das ein einzelnes Feld ohne diese Unterscheidung auch zeigen würde.

Eine Ausnahme bilden reine Anzeige-Widgets außerhalb von Formularen, etwa ein Dashboard-Kachel, die anzeigen soll, ob irgendwo im System ein technischer Fehlerzustand vorliegt, unabhängig von einer Nutzerinteraktion. Dort ist :has(:invalid) ohne die Nutzer-Variante durchaus sinnvoll, weil es dort nicht um Formular-Eingabe-Feedback, sondern um einen reinen Systemzustand geht, der unabhängig davon gemeldet werden soll, ob je ein Mensch mit dem betroffenen Feld interagiert hat.

9. Browser-Unterstützung und Fallback für ältere Browser

Der :has()-Selektor wird von allen aktuellen Versionen von Chrome, Firefox und Safari unterstützt, nachdem Firefox als letzter der drei großen Browser-Engines nachgezogen ist. Für Projekte, die noch ältere Browser-Versionen unterstützen müssen, bleibt :has() in nicht unterstützenden Browsern einfach folgenlos, das Formular funktioniert weiterhin, nur ohne die zusätzliche Wrapper-Färbung.

Wer für ältere Browser trotzdem ein vergleichbares visuelles Ergebnis braucht, kombiniert :has() als bevorzugte Lösung mit einer schlanken JavaScript-Klasse als Fallback, die nur dann aktiv geschaltet wird, wenn CSS.supports('selector(:has(*))') false zurückgibt. So bleibt der Regelfall vollständig deklarativ, während nur eine kleine Minderheit an Altbrowsern den JavaScript-Pfad überhaupt lädt.

10. Zusammenfassung

11. FAQ: :has() für Formularvalidierung: Das Wichtigste auf einen Blick