CSS :has() is not just a fancy :parent
When :has() started popping up in specs and tweets, I mentally filed it under “cool, but not for shipping work.” I was wrong.
Now it is in Chrome, Safari, Edge, and Firefox. I use it in real projects. It has removed entire JavaScript files and a pile of .is-active classes that I was embarrassed to maintain.
If you are a working frontend dev, the shorthand is this: :has() turns CSS from “style what is there” into “style this thing if it contains that thing”. That one capability changes layout, state, and validation flows.
I will walk through three places where it made a real difference for me:
