: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.
試してみましょう
寛容なセレクター解釈
仕様では、:is()
と :where()
が寛容なセレクターリストを受け入れると定義されています。
CSS では、セレクターリストを使用する場合、いずれかのセレクターが無効であれば、リスト全体が無効であると判断されます。 is()
や :where()
を使用する場合、 1 つでも解釈に失敗するとセレクターリスト全体が無効とみなされるのではなく、不正確または対応していないセレクターは無視され、他のものが使用されます。
:where(:valid, :unsupported) {
/* … */
}
は :unsupported
の部分に対応していないブラウザーでも :valid
の部分が有効となり正しく解釈されます。一方で
:valid,
:unsupported {
/* … */
}
では、:unsupported
に対応していないブラウザーでは、:valid
に対応している場合でも全体が無視されます。
例
:where() と :is() の比較
この例では :where()
がどのように作用するのかを示し、 :where()
と :is()
の違いも説明しています。
以下のような 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()
を使うことができます。
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 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされます。
メモ: この例は GitHub からも見ることができます。 is-where を参照してください。
構文
:where(<complex-selector-list>) {
/* ... */
}
仕様書
Specification |
---|
Selectors Level 4 # zero-matches |
ブラウザーの互換性
BCD tables only load in the browser