css-selectorspseudo-elementpseudo-class

Why pseudo-elements can't be used as an argument within :has() pseudo-class?

The CSS specs give following reason why pseudo-elements can't be used as an argument within :has() pseudo-class:

Note: Pseudo-elements are generally excluded from :has() because many of them exist conditionally, based on the styling of their ancestors, so allowing these to be queried by :has() would introduce cycles or cyclic querying.

What's an example of this with pseudo-elements allowed as an argument within the :has() pseudo-class based on the above reason?

Solution

  • If pseudo-elements were valid selectors within :has(), the following code will lead to style cycles (loops) in CSS:

    .box::before {
content: "";
} /* will render the ::before pseudo-element... */

.box:has(::before)::before {
content: none;
} /* will vanish the ::before pseudo-element... */