【CSS】疑似クラス:where()、:is()を使ってみる

こんにちは、今回はCSSの便利な疑似クラス:where()、:is()について紹介したいと思います。

この2つの疑似クラスについては今まで気にはなっていたのですが、各ブラウザの対応状況などから使用するのを見送っていました。当時はIEも一応まだ現役でしたので。。

IEも使えなくなった今の状況、ふと思い出して今一度対応状況を調べてみたら使用しても問題無さそうになっていました。

気づくのが少し遅かったかもしれませんが、備忘録もかねて紹介していきたいと思います。

まずこの疑似クラスで何が出来るかと言うと、CSSの記述量を減らせます。以下に:where()を用いて簡単な例を用意しましたのでご覧ください。

このようにまとめて書くことが可能となります。:is()でも同様となります。

では:where()と:is()は何が違うのかという話になりますが、以下の開発者ドキュメントにはこのように書いてあります。

:where()と:is()の違いは、:where() は詳細度が常に0であるのに対して、:is()は引数内で最も詳細度の高いセレクターの詳細度を取ります。

:where() – CSS: カスケーディングスタイルシート | MDN

なるほど、詳細度が違うので用途によって使い分けてくれということですね。

どういうことか分かりづらいと思うので簡単なDEMOを用意して挙動を確認してみます。

DEMOの主要部分のHTMLは以下になります。

CSSは以下のように書いてみました。

作成したDEMOは以下になります。

→DEMO

CSSの9～12行目の記述で詳細度が低い:where()の方は上書きされましたが、:is()の方はそのままなことが確認できました。

:where()と:is()の使い分けがとても大事になりそうです。

ベースとなる部分は:where()で書いて、細かい部分を上書きなりしたい時に:is()を使用するという方針になりそうです。

:where()の詳細度が0であるという部分がミソだと感じました。これは使い道は結構ありそうですね。

以上クリエイターズブログでした。