Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
:where()
は CSS の擬似クラス関数で、選択肢列挙を引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。
:where()
と :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 を参照してください。
構文
:where( <complex-selector-list> )ここで
<complex-selector-list> = <complex-selector>#
ここで
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
ここで
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]ここで
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'ここで
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'ここで
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Selectors Level 4 :where() の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser