:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

But clicking through to the MDN page they explicitly call this out as slow, and advise not to use :is() for the rightmost selector. Something I’ll have to keep in mind, I guess.

.item1,.item2{ color: “black” } what different ? I don’t understand.

It reminds me when we use to declare placeholders like :

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

If we grouped all the browser specific selectors in the same rules like

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder { 
  color: pink;
}

It would invalidate the whole block. :D

Nice feature by the way, even if I still prefer to use SASS :)

ol, ul, menu, dir
  ol, ul, menu, dir
    ul, menu, dir
      list-style-type: square

I think this goes into the category of don’t worry about it. CSS selector performance is almost never a big deal (I’ve never optimized for it in, say, 20 years) unless you’re in a very very intense DOM situation (say rendering a million nodes). MDN does have a note how :-moz-any had bad performance in that it was the same as *, which personally I use willy nilly, and that :is aims to fix that “bad” performance.

basically means match anything within the parentheses, it will match / translate to:

item1 { color: "black"}
item2 { color: "black"}
... { color: "black"} 

It’s like inArray() function, for CSS.
Really neat stuff that CSS deserve.

Arent you missing h1?

Here’s a simplified example:

section section h1, section article h1 { ... } is the same as section *:is(section, article) { ... }

So it’s basically the same as an OR statement. (Also note that I added a * to make the example more clear.)