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
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.
color-mix() – Hover- und Dark-Mode-Farben ausrechnen lassen, statt sie zu pflegen
Für jede Markenfarbe eine hellere, eine dunklere und eine transparente Variante von Hand zu pflegen, ist Fleißarbeit mit Fehlerquote. color-mix() mischt sie im Browser – aus genau einer Quellfarbe.