The CSS :has() selector
The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters match at least one element.
In earlier revisions of the CSS Selectors Level 4 specification, :has had a limitation that it couldn’t be used within stylesheets. Instead, it could only be used with functions like document.querySelector(); this was due to performance concerns. This limitation has been removed because no browser implemented it that way. Instead, browsers currently only support the use of :has() within stylesheets.
For example, the following selector matches only <a> elements that contain an <img> child:
a:has(> img)
When selector matches a <dt> element immediately followed by another <dt> element:
dt:has(+ dt)
When selector matches <section> elements that don’t contain any heading elements:
section:not(:has(h1, h2, h3, h4, h5, h6))
Or swapping the nesting of the two pseudo-classes:
section:has(:not(h1, h2, h3, h4, h5, h6))
Safari Technology Preview Release 137 is now available for download and enabled support for :has() pseudo-class by default. The Chromium is not supported right now, but they currently working on implementing it. Firefox is not supported right now.
Comments
Reply on Bluesky here to join the conversation.