Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を推奨。
セレクター Widely available

:is() selector

:is() は引数にセレクターリストを受け取り、そのいずれかにマッチする要素を選択する。最も高い詳細度の引数の詳細度が適用される。複雑なセレクターの組み合わせを簡潔にまとめることができる。

セレクター効率化

概要

:is() は引数にセレクターリストを受け取り、そのいずれかにマッチする要素を選択する。最も高い詳細度の引数の詳細度が適用される。複雑なセレクターの組み合わせを簡潔にまとめることができる。

対応ブラウザ

デスクトップ

Chrome 88+
Edge 88+
Safari 14+
Firefox 82+

モバイル

Chrome Android 88+
Safari iOS 14+
Firefox Android 82+

基本構文

CSS 
/* 従来 */
header a:hover,
nav a:hover,
footer a:hover {
  color: blue;
}

/* :is() を使用 */
:is(header, nav, footer) a:hover {
  color: blue;
}

実務での使いどころ

  • セレクターの簡略化

    複数の親要素に共通する子要素のスタイルを1つのルールにまとめる。

  • コンポーネント横断スタイル

    header・main・footer 内の共通要素に一括でスタイルを適用。

注意点

  • 引数の中で最も高い詳細度が全体に適用される点に注意。
  • 無効なセレクターが含まれても他の引数は有効（寛容なセレクターリスト）。

アクセシビリティ

  • スタイル統合時もセマンティクスは変わらない。適切なHTML構造を維持する。

参考リンク