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

:where() selector

:where() は :is() と同じ機能を持つが、詳細度が常に0になる点が異なる。CSSライブラリやリセットCSSなど、ユーザーが容易にオーバーライドできるスタイルを書く場合に最適。

セレクター詳細度

概要

:where() は :is() と同じ機能を持つが、詳細度が常に0になる点が異なる。CSSライブラリやリセットCSSなど、ユーザーが容易にオーバーライドできるスタイルを書く場合に最適。

対応ブラウザ

デスクトップ

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

モバイル

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

基本構文

CSS 
/* 詳細度0のデフォルトスタイル */
:where(ul, ol) {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ユーザーが簡単にオーバーライド可能 */
.my-list {
  list-style: disc;
  padding-left: 1.5rem;
}

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク