【:is(a, b, c)】CSSセレクタで複数条件を短く指定する

説明

※説明の為に単純化してるので意味はありません。:nth-childとかは使いません。

<ul class="parent-1">
  <li class="child-1">a</li>
  <li class="child-2">b</li>
  <li class="child-3">c</li>
</ul>

<ul class="parent-2">
  <li class="child-1">a</li>
  <li class="child-2">b</li>
  <li class="child-3">c</li>
</ul>

このparent-1以下のchild-1, child-2だけ指定したいとする。
コンマで複数要素を指定できるが、↓のように書くとparent-2のchild-2まで指定されてしまう。

.parent-1 .child-1, .child-2 {
  color: orange;
}

なので、このように書かなきゃいけない。
2個だからまだいいけど増やせば増やすほど行が増える。

.parent-1 .child-1,
.parent-1 .child-2 {
  color: orange;
}

:is(a, b, c)

.parent-1 :is(.child-1, .child-2)) {
  color: orange;
}

.parent-1以下の.child-1と.child-2だけ色が変わりましたね。
Chrome 88から使えるらしい。

(本当は:not(:not(a))とかいう頭おかしいことドヤ顔で書いてたんだけどコメントで:is()を教えていただきました。ありがとうございます。死にたい。)

:is() (:matches(), :any()) - CSS: カスケーディングスタイルシート | MDN