Zum Inhalt springen
Kontakt
Code of the Week · Week 01

CSS :has()

der Parent Selector den wir 20 Jahre wollten

Endlich können wir Eltern-Elemente basierend auf ihren Kindern stylen. Ohne JavaScript. Ohne Klassen-Toggling. Pure CSS — und in allen Browsern verfügbar.

:has() ist der Selektor, auf den Frontend-Entwickler 20 Jahre gewartet haben. Drei Live-Demos zum direkten Antesten — alle ohne eine Zeile JavaScript.

Nerd-Level
Dein Browser
wird geprüft
Browser-Support
~96 %
JavaScript in den Demos
0 Zeilen
Demo 1 · Cards

Cards mit und ohne Bild unterscheiden

Die linke Card hat ein Bild, die rechte nicht. Mit :has(img) stylen wir beide unterschiedlich — ohne extra Klassen im HTML.

Platzhalter

Card mit Bild

Diese Card hat ein img-Element. Dank :has(img) bekommt sie automatisch einen Teal-Border und einen Hover-Effekt.

Card ohne Bild

Kein Bild drin? :not(:has(img)) greift. Dezenter Border, kein spezieller Hover. Alles per CSS entschieden.

Platzhalter

Noch eine Card mit Bild

Gleicher Effekt, automatisch. Der Browser entscheidet basierend auf dem DOM-Inhalt.

demo.cssLive

Früher: JavaScript mit classList.toggle() oder data-Attributen. Jetzt: 2 Zeilen CSS.

Demo 2 · Form-Validation

Form Validation per CSS

Das Label färbt sich rot wenn der Input invalid ist, grün wenn valid. Reagiert in Echtzeit — komplett ohne Event-Listener.

demo.cssLive

Tipp etwas in die Felder ein. Das Licht der Seite reagiert mit: CSS setzt nur die Farbe, das Licht selbst rechnet WebGL, ein kleines Skript reicht die Farbe weiter.

Demo 3 · Nav-Focus

Navigation reagiert auf Suche

Klick in das Suchfeld — die Nav-Links blenden sich aus, das Suchfeld dehnt sich aus. Eine CSS-Regel, keine JavaScript-Logik.

demo.cssLive

Klick in das Suchfeld. Die Navigation blendet sich aus, das Suchfeld wird breiter. Pure CSS.

Chrome, Safari, Firefox.
Alle drei. Heute.

:has() ist seit Firefox 121 (Dezember 2023) in allen Major-Browsern verfügbar. Browser-Support: ~96 % aller User. Du kannst es heute einsetzen, ohne Polyfill.

Warum jetzt umstellen?

Jede Komponente, die heute noch JavaScript für state-abhängiges Styling nutzt, ist ein Kandidat für :has(). Weniger Code, weniger Bugs, bessere Performance.

  • Cards mit dynamischem Layout abhängig von ihrem Inhalt
  • Formulare mit Live-Validation-Feedback ohne JS
  • Navigation die auf User-Aktionen reagiert
  • Dark-Mode Toggle ohne body-Class-Switching
  • Konditionale Animations-Trigger basierend auf DOM-Zustand

Webdesign aus Düsseldorf mit modernem CSS.

Wir bauen Websites die heutige Browser-Features nutzen — nicht die von 2018. Schneller, sauberer, wartungsarmer.