Has Element Selector - tomhodgins/process-css-demo GitHub Wiki

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