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.
The :has() pseudo-class is now on the Microsoft Edge backlog. You can track status updates at https://dev.modern.ie/platform/status/cssrelationalpseudoclasshas
This would be incredibly useful when used in conjunction with observers. For example:
@726022756 Probably because it's not that useful. I agree it seems useful at first, until you learn it won't be available in stylesheets because of performance reasons (@387692926) (see https://drafts.csswg.org/selectors/#profiles). It will only be available in JS for querySelector(All), but since many use jQuery, which already supports :has in its selector methods, this is not too exiting.
Does anyone know why no browsers has implemented this yet?
It would be wonderful. Why is does CSS have the restriction of not having it? There is no good reason!
Actually, this won't be supported in CSS, only JS, which is really unfortunate
we need it!
Not entirely sure how useful this would be if implementations stick with static profile :has() considering the ubiquity of jQuery. Most authors only really care about being able to do this in CSS. Hopefully you guys will figure something out.
Brian Kardell commented
the verbiage above is a little obtuse, it's effectively jQuery's :has and it allows you to select things based on their contents. In selectors, it is historically/currently impossible to select an element by saying it has a descendant with some other quality, i.e. given:
There is no way to select any car which contains an element with the .power-windows class. With :has you can: