I say “more superpowers” because there have already been a ton of really amazing clever ideas published by a bunch of super smart people, like:
This article is not a definitive guide to :has(). It’s also not here to regurgitate what’s already been said. It’s just me (hi 👋) jumping on the bandwagon for a moment to share some of the ways I’m most likely to use :has() in my day-to-day work… that is, once it is officially supported by Firefox which is imminent.
When that does happen, you can bet I’ll start using :has() all over the place. Here are some real-world examples of things I’ve built recently and thought to myself, “Gee, this’ll be so much nicer once :has() is fully supported.”
Have you ever built an interactive component that sometimes needs to affect styles somewhere else on the page? Take the following example, where