Firefox の最新版である Firefox 78 が 6月 30日付けでリリースされました。
このバージョンでは、CSS の :is()、および :where() 疑似クラスに対応した他、:read-only および :read-write 疑似クラスも -moz- ベンダ接頭辞が外れて正式対応となりました。
:is() と :where() 疑似クラス
どちらの疑似クラスも、引数としてセレクタを任意の数、記述することが可能で、それにより従来ならカンマ（,）区切りで記述していた複数のセレクタをコンパクトに記述することが可能になります。
例えば、
div p,
section p,
article p,
aside p {
font-size: 1rem;
}
みたいな記述も、:is() を使用すれば、
:is(div, section, article, aside) p {
font-size: 1rem;
}
こんな感じでスッキリ書くことができます。
また、引数には、単体の要素セレクタなどだけでなく、複数のセレクタを組み合わせた記述も可能ですので、下記のような複雑な記述も可能です （このサンプルが実用的かは別として......）。
:is(div.example, div > section, article:not(.example), aside) p {
font-size: 1rem;
}
:where() 疑似クラス
:is() 疑似クラスの方はわかったとして、じゃあ、:where() 疑似クラスの方は？ という話ですが、基本的に使い方はまったく同じです。
ですが、:where() 疑似クラスが :is() 疑似クラスと異なる点として、:where() 疑似クラスで記述されたセレクタは、常に詳細度が 「0」 になる という特徴を持っています。
要するに、
:where(div.example, section.example, article.example, div > aside.example) p {
font-size: 1rem;
}
ような感じで記述したものを、
aside p {
font-size: 1.25rem;
}
のような記述で上書きすることが可能ということです。
これがどんなときに便利かというと、例えばですけども、reset.css や、normalize.css みたいな、最初に読み込んで各要素に初期値っぽいスタイルを定義しておきたい、みたいなスタイルに対して使用しておくと、あとから書くスタイルの詳細度をあまり気にしなくても簡単に上書きしていけるってことです。
用途によっては非常に便利ですね。
追記
2020年 11月 13日に公開された macOS の最新版である 「macOS Big Sur」 にプリインストールされる Safari 14 でも :is()、および :where() 疑似クラスのサポートが追加されました。
その他にも、WebP のサポートとか、地味にうれしい感じのアップデートが。完全に余談ですが。
ということで、:is() と :where() 疑似クラス、実装が広まればとても便利で捗りますね。
現状では Firefox のみが対応しただけとなっています （Chrome や Safari は古い仕様でほぼ同様の機能を持っていた -webkit-any() や :matches() を実装していますが、非推奨となっていますし、少し機能が異なる点もあります） ので、まだ利用機会は限られるかと思いますが、今後に期待です。
Chrome 88 で :is() と :where() 疑似クラスに対応しましたので、主要ブラウザでは実装の足並みが揃いました。制作案件などでも普通に使用できる状態になったと言えるでしょう。
完全に余談ですが、2月に発売した 「できるポケット HTML&CSS全事典」 でも、この便利な 2つの疑似クラスを掲載しようか最後まで悩んでたんですけども、結局、執筆時点ではまともに実装しているブラウザが存在しなかったのと、あとはまぁページ数の関係などで掲載は見送ったんですよね。
そういう書籍の掲載から漏れたセレクタなどはこのサイトの姉妹サイトとして運営している下記のリファレンスサイトで更新していますので、よろしければご参考ください。
