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

:where() selector

:where() は CSS の擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。

:where() と :is() の違いは、 :where() の詳細度が常に 0 であるのに対し、 :is() は引数の中で最も詳細度の高いセレクターの詳細度を継承する点です。

セレクター詳細度

対応ブラウザ

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

許容セレクター リストのサポート
88
88
82
14
88
14
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Default style with specificity 0 */
:where(ul, ol) {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Easily overridable by the user */
.my-list {
  list-style: disc;
  padding-left: 1.5rem;
}

ライブデモ

detaildegree0. reset

:where() selector detaildegree0. reset demo.

プレビュー全画面表示

simple to o-ba-raid

:where() selector simple to o-ba-raid demo.

プレビュー全画面表示

defaultstyle

:where() selector defaultstyle demo.

プレビュー全画面表示

実務での使いどころ

  • CSSリセット・ライブラリの基盤

    詳細度0で基本スタイルを提供し、利用者が最小限の詳細度でオーバーライドできる。

  • デフォルトテーマの定義

    テーマの基盤スタイルを :where() で定義し、カスタマイズの優先度を確保。

注意点

  • 詳細度が0のため、意図せず他のスタイルに上書きされる可能性がある。
  • :is() との使い分けに注意。オーバーライドさせたい場面で使用する。

アクセシビリティ

  • リセットCSSで使用する場合、フォーカスインジケーターを消さないよう注意する。

参考リンク