:where()

ウェア（セレクタ）

意味複数のセレクタをグループ化して、特定の条件に一致する要素

:where()とは？

:where()セレクタは、複数のセレクタを一つのグループとして扱い、その中のどれか一つにでも一致する要素に対してスタイルを適用するために使用します。このセレクタは、:is()セレクタと似ていますが、:where()は詳細度（セレクタの優先度）を最も低い0にする点が異なります。つまり既存のスタイルルールに影響を与えることが少なく、また他のセレクタによるスタイルの上書きが容易になります。

:where()の具体的な使い方

複数の見出しに特定性を上げずにスタイルを適用する例

<style>
  article :where(h1, h2, h3) {
    color: green;
  }
</style>

<article>
  <h1>見出し1</h1>
  <h2>見出し2</h2>
  <h3>見出し3</h3>
</article>

article要素の中でh1、h2、またはh3に一致する要素のテキスト色を緑に設定します。

:where()に関するよくある質問

Q. :where()の特徴は何ですか？

A. :where()の主な特徴は、詳細度（セレクタの優先度）が常に0になることです。これにより、他のセレクタによるスタイルの上書きが容易になり、より柔軟なスタイリングが可能になります。

Q. :where()はいつ使うべきですか？

A. :where()は、複数のセレクタをグループ化しつつ、そのスタイルを簡単に上書きしたい場合に使用します。特に、ライブラリやフレームワークのスタイルを上書きする際や、柔軟性の高いコンポーネントを作成する際に有用です。

Q. :where()の引数の制限は？

A. :where()の引数には、有効なCSSセレクタをカンマで区切って指定できます。:is()と同様に、擬似要素は引数として使用できません。また、ブラウザの対応状況に注意が必要です。

:where()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:where()や:nth-last-child()、::first-line、:not()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。