-
Notifications
You must be signed in to change notification settings - Fork 0
Has Element Selector
Tommy Hodgins edited this page Sep 28, 2019
·
2 revisions
A custom pseudo-class-style selector to allow CSS authors the ability to loosely emulate the behaviour of the :has()
selector from CSS, to select elements containing element(s) matching another selector.
<target>:--has(<child selector>) { <list of declarations> }
-
<target>
is a CSS selector matching the element you want to test -
<child selector>
is a selector to match inside the target element
If you wanted to select all <ul>
and <ol>
elements, a roundabout way you could do this would be to write a selector like this:
:--has(> li) {
background: lime;
}
This is equivalent to *:--has(> li)
, in that the original selector to match is *
, and for all elements matching this, it will check if :scope > li
matches any elements. If true, this selector will match the element matching the original selector, here *
, that has an <li>
as a direct descendant.
- You can read more about CSS's
:has()
selector on MDN