Labor
Scrollen ↓
Code of the Week.
Zum Anfassen.
Jede Folge ein Stück Web, das du direkt auf der Seite ausprobieren kannst. Mit Nerd-Level und dem Check, ob dein Browser schon mitkommt.
Aktuelle Folge · 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.
- Nerd-Level
- Browser-Support
- ~96 %
- Dein Browser
- …
- Demos
- 3 zum Ausprobieren
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.
Noch eine Card mit Bild
Gleicher Effekt, automatisch. Der Browser entscheidet basierend auf dem DOM-Inhalt.