For those that don’t know, here is the spec for :has(), per the CSSWG:
The relational pseudo-class, :has(), is a functional pseudo-class taking a relative selector list as an argument. It represents an element if any of the relative selectors, when absolutized and evaluated with the element as the :scope elements, would match at least one element.
To my knowledge, this is not being actively worked on by any vendor. No doubt, this single selector complicates CSS by a mile implementation-wise. However, the implementation of such a selector would be widespread, as most experienced developers could attest.
Hopefully you all agree that this is a very powerful selector, and should be implemented.
Unfortunately, the :has() selector is almost useless since it’s supposed to be available in JS only, not in CSS. That’s probably one of reasons why it has not much implementors’ interest — web developers just don’t need it in its current state.
See the spec section about dynamic and static profiles. The dynamic (CSS) profile explicitly excludes :has() unlike the static (JS) profile.
In JS we are already able to implement similar functionality since JS is fortunately a programming language. To be fair, having :has() in JS would indeed allow to make our JS code somewhat less verbose by avoiding extra querySelector() calls for the purpose of testing whether an element contains something matching a selector that we could use as an argument for :has().
Interesting, I’d never heard of that. So basically it’ll be implemented in JS and not vanilla CSS? This would still be something worth pursuing from vendors, in my opinion.
Agreed, the thought of having something like :has() available in CSS was a blissful thought, but even if it’s only going to be implemented in JS, it still is useful in many cases and worth the fight.