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

:is() selector

:is() は CSS の擬似クラス関数で、セレクターのリストを引数に取り、リスト中のセレクターのいずれか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。

メモ: 元々は :matches() （および :any()）という名前でしたが、CSSWG issue #3258 で :is() に改名されました。

セレクター効率化

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:is
88
88
78
14
88
14
forgiving selector list

許容セレクター リストのサポート
88
88
82
14
88
14
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
対応条件
  • 以前は別名で対応していました: :-webkit-any() (12)
実装メモ
  • コンビネータはサポートしていません。
注釈 2件
対応条件
  • 以前は別名で対応していました: :-webkit-any() (79)
実装メモ
  • コンビネータはサポートしていません。
注釈 3件
対応条件
  • 以前は別名で対応していました: :-moz-any() (4)
実装メモ
  • コンビネータはサポートしていません。
  • バグ 906353 を参照してください。
注釈 3件
対応条件
  • 以前は別名で対応していました: :matches() (9)
  • 以前は別名で対応していました: :-webkit-any() (5)
実装メモ
  • コンビネータはサポートしていません。
注釈 2件
対応条件
  • 以前は別名で対応していました: :-webkit-any() (18)
実装メモ
  • コンビネータはサポートしていません。
注釈 3件
対応条件
  • 以前は別名で対応していました: :matches() (9)
  • 以前は別名で対応していました: :-webkit-any() (5)
実装メモ
  • コンビネータはサポートしていません。

基本構文

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

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

ライブデモ

Multipleelement. unified

:is() selector Multipleelement. unified demo.

プレビュー全画面表示

heading. unifiedstyle

:is() selector heading. unifiedstyle demo.

プレビュー全画面表示

nestedcondition

:is() selector nestedcondition demo.

プレビュー全画面表示

実務での使いどころ

  • セレクターの簡略化

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

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

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

注意点

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

アクセシビリティ

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

参考リンク