CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！

複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。
そんな:is()と:where()の便利な使い方を紹介します。

CSS :is() and :where() are coming to browsers

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場
• :is()を使用すると、繰り返しを減らせる
• :where()を使用すると、詳細度を低くキープできる

CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場

CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 106）とFirefox（version 78）のプレビュー版でサポートされるようになりました。

Chromeのサポートは未ですが、bugs.chromium.orgでスターをつけると、これらの機能に対するサポートを表明できます。

• :is() -bugs.chromium.org
• :where() -bugs.chromium.org

:is(): 上部のスターをつけるとサポート表明

:is()を使用すると、繰り返しを減らせる

:is()疑似クラスを使用すると、セレクタの繰り返しを減らせます。

主にこの機能は、標準的なCSSで役立ちます。SassなどのCSSプリプロセッサを使用している場合は、代わりにネストすることをお勧めします。

:is()の詳細度は、セレクタの引数によって決まります。具体的な例は、Stefan Judisのツイートの動画をご覧ください。

TIL that specificity of :is() in CSS is not what you might expect. 🙈

🔗 MDN: https://t.co/qtuGvoxqnR
🔗 Spec: https://t.co/G1380qsu6J #devsheets

Video alt: Example showing that the specificity of an :is() selector is evaluated by the most specific included selector pic.twitter.com/KQIT0rYlz1

— Stefan Judis (@stefanjudis) May 24, 2020

メモ

ブラウザは非標準の:-webkit-any()と:-moz-any()の疑似クラスもサポートしています。これらは:is()に似ていますが、より限定的です。Webkitは2015年に:-webkit-any()を非推奨とし、MozillaはすでにFirefoxのユーザーエージェントスタイルシートを更新して:-moz-any()の代わりに:is()を使用するようにしています。

※:-webkit-any()疑似クラスは複雑なセレクタ（例: .card p）をサポートせず、詳細度は常に単一の疑似クラスとして扱われます（引数は考慮しない）。

:where()を使用すると、詳細度を低くキープできる

:where()疑似クラスの構文と機能は、:is()と同じです。唯一の違いは、:where()はセレクタ全体の詳細度を高めないことです。

:where()疑似クラスのこの機能は、スタイルを上書きする時に役立ちます。
例えば、CSSリセットのsanitize.cssには、<svg fill>属性がない場合にデフォルトの塗りつぶし色を設定する次のスタイルルールが含まれています。

このスタイルの詳細度は高い（B=1, C=1）ので、単一のクラスセレクタ（B=1）では上書きができません。!importantを使用するか、より高い詳細度を使用する必要があります。

CSSのライブラリやベースのスタイルシートは、属性セレクタを:where()でラップすることで、セレクタ全体の詳細度を低く保つことができ、この問題を回避できます。