Description
CSS Selectors Level 4 (still in draft) introduce the :has()
pseudo-class:
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.
For example, the following selector matches only
<a>
elements that contain an<img>
child:
a:has(> img)
The following selector matches a<dt>
element immediately followed by another<dt>
element:
dt:has(+ dt)
Although no browser seems to be supporting this yet, it looks here to stay (I may be wrong).
It would be interesting to support this to get a bit more flexibility on predicates (e.g. testing children elements).