The :is function breaks the tool when more than one argument is given

[Pikamander2]

This CSS snippet works fine:

.container > *:is(h1)

But this snippet breaks the tool:

.container > *:is(h1, h2)

The first snippet reports 2 classes and 1 element and its syntax gets correctly highlighted.

For the second snippet, the tool fails to highlight any part of the selector and instead reports a value of 0 for all three categories.

[keeganstreet]

Hey @Pikamander2 , sorry but I haven't added support for any level 4 CSS selectors, including the matches-any pseudo-class (:is()) https://www.w3.org/TR/selectors-4/#matches

[tarciozemel]

Hey @Pikamander2 , sorry but I haven't added support for any level 4 CSS selectors, including the matches-any pseudo-class (:is()) https://www.w3.org/TR/selectors-4/#matches

Do you intend to?

[Inwerpsel]

The error is because of this check for a , anywhere in the selector. A comma on the top level of the selector means there's (at least) 2 different specificities included, and the code wouldn't know which one you mean.

In case of the level 4 selectors the situation gets interesting.

is:() does contribute to specificity, but its selector list does not result in multiple possible specificities, like to one at the top level. Instead, it always uses its most specific selector's specificity, even if only a less specific selector matches an element. Possibly this behavior was taken over from the :not selector, where this logic makes complete sense, but on :is, it's rather unintuitive.

See https://www.w3.org/TR/selectors-4/#example-bd54871c.

I can imagine this is a bit tricky to support.

The :where() selector, on the other hand, by definition does not contribute to specificity. It should be possible to strip out each instance, and do a calculation on the remaining parts, right? If nothing is left the specificity is 0.