:where()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

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

試してみましょう

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

寛容なセレクター解釈

仕様では、:is():where()寛容なセレクターリストを受け入れると定義されています。

CSS では、セレクターリストを使用する場合、いずれかのセレクターが無効であれば、リスト全体が無効であると判断されます。 is():where() を使用する場合、 1 つでも解釈に失敗するとセレクターリスト全体が無効とみなされるのではなく、不正確または対応していないセレクターは無視され、他のものが使用されます。

css
:where(:valid, :unsupported) {
  /* … */
}

:unsupported の部分に対応していないブラウザーでも :valid の部分が有効となり正しく解釈されます。一方で

css
:valid,
:unsupported {
  /* … */
}

では、:unsupported に対応していないブラウザーでは、:valid に対応している場合でも全体が無視されます。

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

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

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

html
<article>
  <h2>:is() でスタイル付けしたリンク</h2>
  <section class="is-styling">
    <p>
      こちらがメインコンテンツです。これは<a href="https://mozilla.org"
        >リンクを含んでいます</a
      ></p>
  </section>

  <aside class="is-styling">
    <p>
      こちらが脇コンテンツです。これも<a href="https://developer.mozilla.org"
        >リンクを含んでいます</a
      ></p>
  </aside>

  <footer class="is-styling">
    <p>
      こちらがフッターです。これも<a href="https://github.com/mdn">リンク</a
      >を含んでいます。
    </p>
  </footer>
</article>

<article>
  <h2>:where() でスタイル付けしたリンク</h2>
  <section class="where-styling">
    <p>
      こちらがメインコンテンツです。これは<a href="https://mozilla.org"
        >リンクを含んでいます</a
      ></p>
  </section>

  <aside class="where-styling">
    <p>
      こちらが脇コンテンツです。これも<a href="https://developer.mozilla.org"
        >リンクを含んでいます</a
      ></p>
  </aside>

  <footer class="where-styling">
    <p>
      こちらがフッターです。これも<a href="https://github.com/mdn">リンク</a
      >を含んでいます。
    </p>
  </footer>
</article>

このややわざとらしい例では、2 つの article 要素がそれぞれ section、aside、footer 要素を含んでいます。2つの article は、子要素をマークするために使われるクラスが異なります。

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

css
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;
}

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

css
footer a {
  color: blue;
}

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

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

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

構文

css
:where(<complex-selector-list>) {
  /* ... */
}

仕様書

Specification
Selectors Level 4
# zero-matches

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:where()
Support for forgiving selector list

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報