: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) | ○Edge 88+ |
Chrome | ○Chrome 88+ |
Firefox | ○Firefox 78+ |
Safari | ○Safari 14+ |
iOS Safari | ○ |
Android Chrome | ○Chrome 97+ |