cssの疑似クラス :is()と:where()

CSSの比較的新しい疑似クラス:is()と:where()の使い方と違いについてまとめました。

:is()

:is() のカッコ内に複数のセレクタを、,（カンマ）区切りで記述することにより、異なるセレクタにまとめて同じスタイルを適用できます。

:where()

:where() の構文と機能は、:is()と同じです。

 

では、:is()と:where()は何が違うのでしょうか？

:is()と:where()の違い

:is()と:where()の違いは、セレクタの詳細度（優先度）にあります。

 

言葉では伝わりずらいので、まずは以下のサンプルを見てみましょう。

 

実行結果

 

where の .sample1 だけが緑色に上書きされました。

 

上記のコードから、sample1に関わる記述のみを分かりやすく抜き出すと以下のようになります。

 

:is()は、セレクタ全体の詳細度に影響されます。

.is :is(.sample1) a の方が、.sample1 a よりも詳細度が高い（クラスセレクタが2個使われている）ので、.is :is(.sample1) a が優先されます。

 

:where()は、詳細度（CSSの優先度）が常に0に（最も低く）なります。セレクタ全体の詳細度に影響されません。

.where :where(.sample1) a の方が、.sample1 a よりも詳細度が高い（クラスセレクタが2個使われている）のですが、:where()の詳細度は常に0（最も低い）ため、.sample1 a が優先されます。

ブラウザ対応状況

:is()

Can I use

 

:where()

Can I use

いずれも全てのモダンブラウザで対応しています。

 

セレクタの詳細度についてより詳しく知りたい方はこちらの記事もCheck！