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
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.
Schöne Zeilenumbrüche in CSS – text-wrap balance und pretty
Eine Überschrift, bei der ein einzelnes Wort einsam in der letzten Zeile hängt, sieht unruhig aus. Mit text-wrap balance und pretty überlässt du dem Browser das saubere Umbrechen – ohne manuelle <br> und ohne JavaScript.
Text nach drei Zeilen abschneiden – line-clamp statt JavaScript
Kartenlisten sehen nur dann ordentlich aus, wenn alle Vorschautexte gleich hoch sind. Das serverseitig auf 120 Zeichen zu kürzen geht schief, sobald die Karte schmaler wird – CSS kann das seit Jahren selbst.