:where()複数のセレクタを引数でまとめて記述する(詳細度ゼロ)

:where() 疑似クラスは、引数としてセレクタを指定することが可能な疑似クラスです。引数として複数のセレクタをまとめて記述することで、その中のいずれか 1つに当てはまる要素にマッチさせることができます。

使用方法としては :is() 疑似クラスと同様になりますが、:is() 疑似クラスとの差異は、:where() 疑似クラスにおいて記述されたセレクタの詳細度が、常に「0」となる点です。

つまり、:where() 疑似クラスを使用して記述されたスタイル宣言は、容易に他のスタイルで上書き可能ということになります。

例えば、

:where(div.example, section.example, article.example, aside.example) p {
  font-size: 1rem;
}

と記述したものを、

aside p {
  font-size: 1.25rem;
}

のような記述で上書きすることが可能です。これは、例えば reset.css のような、初期値として読み込んでおきたいが、他のスタイルで上書きする際にその詳細度が問題になるのは困る、といったシチュエーションで有用です。

:where()のサンプルソース

:where(div, section, article, aside) p {
  font-size: 1rem;
}

主要ブラウザの対応

IE11 ×
Edge(EdgeHTML) ×
Edge(Chromium) ×
Chrome ×
Firefox
Safari ×
iOS Safari ×
Android Chrome ×

仕様書

Selectors Level 4

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

@-規則
メディアクエリ
セレクタ
疑似要素
疑似クラス
CSS関数
背景

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ