Der Eltern-Selektor ist da – bedingtes Styling mit CSS :has()
Jahrelang gab es in CSS keinen Weg, ein Element abhängig von seinem Inhalt zu stylen. Mit :has() geht das endlich – ganz ohne JavaScript. Drei Beispiele, die ich ständig brauche.
Es gab in CSS ewig eine Lücke: Du konntest ein Kind abhängig vom Elternteil stylen, aber nie umgekehrt. „Gib der Karte mehr Abstand, *wenn* sie ein Bild enthält" – dafür brauchte man JavaScript. Mit :has() ist das vorbei. Der Selektor prüft, ob ein Element etwas Bestimmtes *enthält*, und stylt dann das Element selbst.
1. Eine Karte, die weiß, ob sie ein Bild hat
/* Karte OHNE Bild bekommt oben Innenabstand … */
.card { padding: 20px; }
/* … Karte MIT Bild lässt das Bild bündig oben anliegen */
.card:has(img) { padding-top: 0; }2. Formular-Feld rot färben, wenn die Eingabe ungültig ist
Kein oninput, kein Klassen-Umschalten per JS – reines CSS:
.field:has(input:invalid) label { color: #dc2626; }
.field:has(input:invalid) input { border-color: #dc2626; }3. Die Seite sperren, wenn ein Dialog offen ist
Ein Klassiker, den man sonst mit JavaScript löst – hier reicht :has():
body:has(dialog[open]) { overflow: hidden; }Sobald irgendwo ein <dialog open> steht, hört die Seite hinter dem Dialog auf zu scrollen. Verschwindet der Dialog, ist auch die Regel wieder weg.
Warum das so stark ist
:has() kombiniert sich frei: li:has(> a:hover), .form:has(:checked), article:has(h2 + p). Und es ist nicht auf Kinder beschränkt – jeder Selektor darin zählt. Unterstützt wird es inzwischen in allen aktuellen Browsern (Chrome, Safari und Firefox seit Ende 2023). Für ganz alte Browser lohnt sich ein kurzer Blick auf caniuse – dort siehst du die Abdeckung tagesaktuell.
Solche kleinen, robusten CSS-Kniffe sparen jede Menge JavaScript. Wenn du eine Website willst, die sauber und wartbar gebaut ist, meld dich über bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
Fluid Typography mit CSS clamp() – Schrift, die ohne Media Queries mitwächst
Statt an drei Breakpoints feste Schriftgrößen zu setzen, lässt du sie mit clamp() flüssig zwischen einem Minimum und Maximum skalieren. Eine Zeile CSS ersetzt einen Stapel Media Queries.
Responsives Karten-Grid ganz ohne Media Queries
Mit repeat(auto-fill, minmax()) baust du ein Grid, das die Spaltenzahl selbst an die Breite anpasst. Ein einziger Deklarationsblock ersetzt einen Stapel Media Queries.
Modifier-Reihenfolge in Compose – warum padding vor background alles ändert
In Jetpack Compose ist die Reihenfolge der Modifier keine Kosmetik, sondern Logik. background vor padding färbt auch den Rand ein, padding vor background nicht. Ein Beispiel, das den Groschen fallen lässt.