For over a decade, the most requested CSS feature was a parent selector. In 2023 it shipped as :has(), and by now every major browser supports it. Yet I still see codebases that don't use it.
Before :has()
/* Adding a class via JS just to style a parent */
.card.has-image .card-body { padding-top: 0; }After :has()
.card:has(img) .card-body { padding-top: 0; }
/* No JS needed. Pure CSS. */This alone eliminates hundreds of lines of "state class" boilerplate in typical projects. But it goes further — you can style form states, empty containers, even sibling relationships that were previously impossible.