Add support for <relative‑selector‑list> in the :has(…) pseudo‑class

[ExE-Boss]

The :has(…) pseudo‑class, which is being prototyped in Blink, is specified as taking a <relative‑selector‑list>.

See also

• Chromium Issue 669058: CSS selectors Level 4: support :has()
• https://github.com/Igalia/explainers/tree/main/css/has

---

More broadly, the function syntax for <pseudo‑class‑selector> is specified as taking <any‑value>, meaning that the current parser is too restrictive, and also too lax, as :is(1 - 2) should result in a warning, since 1 - 2 is not a valid selector, but because :is(…) takes a <forgiving‑selector‑list>, it’s equivalent to :is() at runtime, which is a valid selector that matches nothing.

The correct implementation would be to parse pseudo‑class arguments as <any‑value>, rather than as [ <complex‑selector‑list> | <calc‑sum> ]? as it currently does, and then perform stricter validation of the arguments based on the pseudo‑class/pseudo‑element itself.

[aeschli]

Thanks for the pointers. Do you have some real-world code snippets that I can use to test this?

[romainmenke]

examples for :has with relative selectors : https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-in-adjacent-position.html

div:has(.test) + #subject {
	background-color: red;
}

div:has(> .test) + #subject {
	background-color: green;
}

div:has(~ .test) + #subject {
	background-color: yellow;
}

div:has(+ .test) + #subject {
	background-color: blue;
}

div:has(~ div .test) + #subject {
	background-color: purple;
}

div:has(+ div .test) + # subject {
	background-color: pink;
}

[woody-li]

Safari 15.4 has supported the syntax, and Chrome 105 will support it in the near future.
Is it possibile to improve implementation priority.
Thanks