I’m such a :has() selector fanboy in CSS. We’ve covered it many times. But Bruce Lawson goes as far as to call it “The God Selector” because:
[It] is omnipotent because it doesn’t require any structural relationship between the thing being checked and the thing being styled.
In other words, you can select any element based on the state of any other element with no regard for where they are in the DOM, which is as powerful as it gets in selection.
Imagine it like this:
/* You're selecting the <html> element
when there is *any* popover open. */
:has(:popover-open) {
/* Now select buttons *anywhere* on the page
that also trigger popovers. */
button[popovertarget] {
}
}Code language: CSS (css)