:where()擬似クラス関数について

こちらのページで:is()擬似クラス関数を紹介しましたが、今回はそれととても似ている:where()擬似クラス関数を紹介します。

:where()も複数のセレクターをまとめることができる疑似クラス関数ですが、リストの詳細度が0になるという特徴があります。

:is()と同じく、2022年5月現在、ほぼ全ての主要ブラウザーで使用することができます。

※参考 : Can I use

複数のセレクターを一つにまとめることができる

:is()と同じく、:where()を使用すれば複数のセレクターをまとめて記述することができます。

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

sectionの中にある見出しや本文の色を薄くしたい場合は、:where()を使用してセレクターをまとめて記述することができます。

style.css

/* 従来の書き方 */
section h1,
section h2,
section h3,
section p {
  color: #444;
}

section :where(h1, h2, h3, p) {
  color: #444;
}

:is()と違い、:where()で宣言されたリストは詳細度が0になります。

例えば以下のようなHTMLとCSSがあった時、文字は何色に表示されるでしょうか？

<h1 class="title">h1</h1>

style.css

/* 詳細度 : 0 */
:where(.title) {
  color: red;
}

/* 詳細度 : 0.0.1 */
h1 {
  color: blue;
}

classセレクターの方が要素セレクターより詳細度が高いのはご存じだと思います。しかし、:where()によって.titleの詳細度は0になるため、要素セレクターで指定されているcolor: blueが適用されます。これはつまり容易に上書きできるという事ですね。

後から容易に上書きできるという性質上、リセットCSSに用いると便利だと思います。

以下のように、:where(a)でブラウザーの持つデフォルトCSSを上書きし（詳細度が0と言ってもUser Agent Stylesheetは上書きできるため注意）、nav aのように必要な箇所にCSSを当てていくことができます。

style.css

/* ブラウザーのデフォルトCSSを上書き */
:where(a) {
  color: #444
}

/* navの中のa要素は緑にする */
nav a {
  color: green;
}

実際に各種リセットCSSも:where()を使用していることがあります。代表として、:where()がふんだんに使用されているsanitize.cssを取り上げたいと思います。

sanitize.cssでは、リストに関するスタイルを一まとめにしてmarginをなくしています。

style.css

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

また、セレクターをまとめずとも、詳細度を0にする目的で:where()を利用しているであろう部分もありました。

style.css

:where(body) {
  margin: 0;
}

:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

他にも色々なリセットCSSを見ましたが、:where()が使用されているものは少なかったです。これは恐らく、IEを含むレガシーブラウザーを考慮してのことだと邪推します。もう少し時間が経てばwhere()の利用も増えてくるんじゃないかと思っています。

:is()と同じく:where()にも無効なセレクター宣言を無視してくれるような働きがあります。詳しくは:is()の記事をご覧ください。

更新履歴