--- title: ':where()' slug: 'Web/CSS/:where' tags: - ':where' - CSS - Experimental - NeedsBrowserCompatibility - NeedsContent - NeedsExample - Pseudo-class - Reference - Selector - Selectors - Web - セレクター - 擬似クラス translation_of: 'Web/CSS/:where' ---
{{CSSRef}}{{SeeCompatTable}}

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

:where() と {{CSSxRef(":is", ":is()")}} の違いは、 :where() は詳細度が常に 0 であるのに対して、 :is() は引数内で最も詳細度の高いセレクターの詳細度を取ります。

例

:where() と :is() の比較

この例では :where() がどのように作用するのかを示し、 :where() と :is() の違いも説明しています。

以下のような HTML を想定してください。

<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
  </section>

  <aside class="is-styling">
    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
  </aside>

  <footer class="is-styling">
    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
  </section>

  <aside class="where-styling">
    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
  </aside>

  <footer class="where-styling">
    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
  </footer>
</article>

このやや矛盾した例では、2つの記事があり、それぞれがセクション、脇、フッターを含んでいます。これらの記事は、子要素をマークするために使われるクラスによって異なります。

中のリンクの選択をより簡単にして、しかし区別できるようにするために、次のように :is() や :where() を使うことができます。

html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

しかし、後からシンプルなセレクターを使ってフッターのリンクの色を上書きしたい場合はどうすればいいのでしょうか？

footer a {
  color: blue;
}

これは赤いリンクに作用しません。 :is() の中のセレクターは全体のセレクターの詳細度で算出され、クラスセレクターは要素セレクターよりも高い詳細度を持っているからです。

しかし、 :where() 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされてしまいます。

結果は以下で見ることができます (ただし、現在のところ :is() と :where() は既定では Firefox Nightly のバージョン 77 以降では有効になっているだけで、他のバージョンの Firefox では layout.css.is-where-selectors.enabled の設定で隠されています)。

注: この例は GitHub からも見ることができます。 is-where を参照してください。

{{EmbedLiveSample('Examples', '100%', 600)}}

構文

{{CSSSyntax}}

仕様書

仕様書 状態 備考
{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}} {{Spec2("CSS4 Selectors")}} 初回定義

ブラウザーの互換性

{{Compat("css.selectors.where")}}

関連情報