◆ どれかにマッチすれば良い CSS セレクタ
◆ :any, :matches の正式版

明日くらいに 89 が出そうというところですが いまさら 88 で :is に対応してたことに気づきました
:is は以前から :any や :matches という名前であったもので 複数のセレクタを書いてそのうちのどれかに当てはまればマッチしたものとするセレクタです
組み合わせが多くなるときに全部書かなくて済むので助かります

Chrome が対応になったのでベンダープレフィックスや postcss プラグインが不要になりました
Firefox は 78 (2020 年夏頃) から Safari(iOS) は 14 からすでに対応していました

使い方

使い方は

:is(ul, ol) li {
margin: 5px;
}

のようになります
これは

ul li, ol li {
margin: 5px;
}

と一緒です

CSS では不正なセレクタがあるとそのスタイル定義全体が無効になります
:is の中だと不正なものだけを無視してくれるようです
あくまで :is の中身としてパースできる場合であって () を閉じてないみたいのは全体が無効になります
そのブラウザで未対応のセレクタがあったときに 全部が無効にならないようにするためのようです

:where

:is と一緒に :where も追加されています
機能は一緒ですが :where は詳細度が 0 になるという違いがあるようです
詳細度違いのバージョンが出るのは意外でした

どうせなら全体を囲むと詳細度が無効になって後ろに書いてるものが優先されるルールになるブロックを作って欲しいです
詳細度は邪魔なだけなんですよね

<!doctype html>

<style>
.b1, .b2, .b3 {
display: flex;
}
.c1, .c2, .c3 {
margin: 10px;
}
:is(.a1, .a3) :is(.b1, .b2) :is(.c2, .c3) {
color: red;
}
:is(.a2, .a3) :is(.b1, .c3) {
text-decoration: underline;
}
</style>

<div class="a1">
<div class="b1">
<div class="c1">111</div>
<div class="c2">112</div>
<div class="c3">113</div>
</div>
<div class="b2">
<div class="c1">121</div>
<div class="c2">122</div>
<div class="c3">123</div>
</div>
<div class="b3">
<div class="c1">131</div>
<div class="c2">132</div>
<div class="c3">133</div>
</div>
</div>
<div class="a2">
<div class="b1">
<div class="c1">211</div>
<div class="c2">212</div>
<div class="c3">213</div>
</div>
<div class="b2">
<div class="c1">221</div>
<div class="c2">222</div>
<div class="c3">223</div>
</div>
<div class="b3">
<div class="c1">231</div>
<div class="c2">232</div>
<div class="c3">233</div>
</div>
</div>
<div class="a3">
<div class="b1">
<div class="c1">311</div>
<div class="c2">312</div>
<div class="c3">313</div>
</div>
<div class="b2">
<div class="c1">321</div>
<div class="c2">322</div>
<div class="c3">323</div>
</div>
<div class="b3">
<div class="c1">331</div>
<div class="c2">332</div>
<div class="c3">333</div>
</div>
</div>

is-selector-example