:whereとは？
:where() は CSS の擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。
MDNには上記の記載があります。
が、用語が理解できておらず、意味を掴みきれていません。
わからないところを調べながら、 :where()について理解します！
まず、擬似クラスとは？
MDNには、以下のように記載があります。
CSS の擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。
セレクターとは？
- 要素やその他の用語の組み合わせで、どの HTML 要素を選択するかブラウザーに伝える
- 選択された要素には CSS プロパティ値が適用される
- 例：擬似クラス
:hover-
button(セレクター)に:hoverを付加して、buttonがhoverの状態を指定している
-
button:hover {
color: blue;
}
- 擬似クラスは、
:の後に擬似クラス名を書く - 関数形式の擬似クラスもある（例：
:where()）
擬似クラス
ユーザーの行動や履歴・設定や入力内容による要素の状態に合わせて、スタイルを変えることができる
擬似クラスの中でも、表示状態擬似クラス、入力擬似クラス、など関連する要素によって分類されています。
参考程度に、分類ごちゃ混ぜで一部抜粋したのが以下です。この他にもたくさんあります...！
| 擬似クラスの種類 | 一致する要素 |
|---|---|
:fullscreen |
現在全画面モードの要素 |
:hover |
ユーザーがポインティングデバイスで指している要素 |
:active |
ユーザーによってアクティブになっている要素 |
:visited |
訪問したことのあるリンク |
:checked |
チェックボックスやラジオボタンなどがオンになっている要素 |
:disabled |
ユーザーインターフェイス要素が無効な状態 |
:blank |
ユーザーが入力する要素が空である場合 |
:valid |
内容が妥当である要素 |
:invalid |
無効な内容を持つ要素 |
:where()はどの分類？
:where()は、擬似クラスの中の 関数擬似クラス の一つです。
関数擬似クラスについては、以下のように説明があります。
セレクターリストまたは寛容なセレクターリストを引数として受け取る擬似クラスです。
この説明について深掘ります。
セレクターリストを引数に取る
セレクターとは、どの HTML 要素を選択するかブラウザーに伝えるものでした。
セレクターリストは、選択する要素を複数ブラウザに伝えられるということです。
/*例*/
:where(h1, h2, p) { color: red; }
/* h1, h2, pの複数を引数に取り、同じスタイルを指定している */
寛容なセレクターリスト
引数の中に間違いが含まれていても、「理解できるものだけ」 を選んで適用してくれる
他の関数擬似クラスと :where()
| 関数擬似クラス | 主な役割 | 詳細度 | 寛容さ |
|---|---|---|---|
| :where() | 複数まとめて指定する | 常に0 | あり |
| :is() | 複数まとめて指定する | 引数の中で最も強いものに合わせる | あり |
| :not() | 「〜以外」を指定する | 引数の中で最も強いものに合わせる | なし |
| :has() | 「〜を持つ」要素を指定する | 引数の中で最も強いものに合わせる | あり |
詳細度：CSSの優先順位を決めるためのスコア
- ブラウザは、同じ要素に対して複数のスタイルが指定されたとき、このスコアを計算して、最も高いポイントを持つスタイルを優先して適用する
-
idセレクター >classや擬似クラス>要素(タグ)>*（全称セレクター、詳細度0）
:where()と:is()の違い
-
詳細度に違いがある
-
is()：引数の中で、最も強いセレクターの詳細度を継承する -
where()：どんな引数が入っても、詳細度は0
-
/* 例 */
/* :where() - buttonタグにつけたクラスを引数にとる */
:where(.my-button) { color: red; }
/* :is() - buttonタグにつけたクラスを引数にとる */
:is(.special-button) { color: blue; }
/* --- buttonタグの上書きを試みる --- */
button { color: black; }
- 詳細度0の
:where()よりも、buttonタグ指定の方が強いので、.my-buttonはcolor: black;に上書きされる - 一方、
:is()は、.special-buttonクラスの詳細度を受け継ぐので、タグに指定しているcolor: black;よりも優先されて、.special-buttonは上書きされない
:where()は後から上書きしやすい
最後に
今回は:where()について、擬似クラスの概要から学びました。
擬似クラスには他にも種類がたくさんあるので、使えるように引き出しとして持っておきたい 
アドカレ2025が開催中！ 
今年もアドカレ開催中です 
最終日まであとちょっと...！！！
特設サイト ↓
ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓
参考