Web Dev · by Maya Putri · 2026-10-15

CSS :has() selector quietly solved a layout problem I'd been hacking around with JS for years

Needed to style a parent container differently based on whether it contained an error message child. Used to do this with a MutationObserver and a class toggle, which was always a little fragile. Realized browser support for :has() is now solid enough that I could just write `.card:has(.error) { border-color: red; }` and delete like 40 lines of JS. Felt genuinely great to delete code instead of adding it for once.

1 sparks · 9 comments

Comments

Isha Menon · 0 likes

:has() is so underrated, its basically the parent selector css devs have wanted for literally a decade

Noé Petit · 0 likes

deleting code instead of adding it is the best feeling in this job, more posts like this please

Ethan Brooks · 0 likes

check support tables before fully relying on it for critical paths tho, still a few older browser versions floating around in enterprise environments

Ngozi Bello · 0 likes

fair but at this point its like 95%+ global support, worth it for most products imo

Arif Hasan · 0 likes

replaced a MutationObserver hack with :has() last month too, genuinely one of the best css additions in years

Hugo Sánchez · 0 likes

its wild it took this long for 'parent selector' to land, people have been asking for it since like 2012

Camille Dubois · 0 likes

can confirm this works great for form validation styling too, no more JS just to turn a border red

Maya Williams · 0 likes

the css working group really cooked with this one, slept on feature for sure

Valentina Ruiz · 0 likes

lol i still have muscle memory to reach for JS first for stuff like this, need to retrain my brain