[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは？

isと:whereとは何ですか？

:is() と :where() は、どちらもセレクタを作成する際に、繰り返しを短くするのに役立つ擬似クラス関数です。どちらもセレクタのパラメータ（id、class、tagなど）の配列を受け取り、そのリストの中から選択可能なすべての要素を選択します。

これでは、短いセレクタを書くための方法としてあまり意味がないかもしれませんので、試しに :where() and :is() .

isと:whereはどのように使うのですか？

:where() は、次のような問題を解決するのに役立ちます。

.btn span > a:hover,
#header span > a:hover,
#footer span > a:hover {
  ... ;
}

を次のようなものに変更します。

:where(.btn, #header, #footer) span > a:hover {
  ... ;
}

と :is() を使えば、同じ例を例に追加することができます。

is(.btn, #header, #footer) span > a:hover {
  ... ;
}

isと:where andの違いは何ですか？

:where() と :is() の見た目と機能は同じですが、覚えておきたい違いが1つあります。それは、両者には異なる特異性があるということです。 . :where() は単純で常に特異度0であるのに対し :is() は、特異性の点で最も強いセレクタです。

CSSの特異性とは（ひとことで言うと）何ですか？

CSSには、4段階の特異度レベルがあります。それぞれのレベルやカテゴリーには異なるスコアがあり、すべてのスコアを合計してセレクタの特異性を計算することができるのです。

セレクタが多い要素には、その要素に適用されるスタイルも多いので、CSSを記述してもスタイルが適用されず、開発ツールに下線として表示されることがあるのは、そのためです。

特異度スコアリング

• ID - 特異性スコア100
• インラインスタイル - 特異性スコア：1000
• 要素および擬似クラス - 特異度スコア 1
• クラス、擬似クラス、属性 - 特異度スコア 10

例えば

button.btn {
  color: red;
}
.btn {
  color: green;
}

.btn = 10

button.btn = 1 + 10 = 11

を置くと .btn クラスを <button> タグを使用すると、テキストが赤くなります。 button.btn セレクタの方が .btn セレクターを使用します。

ご覧のように、2つの異なるレベルの擬似クラスがありますが、これは、どの擬似クラスをどのように使うかによって、異なる特異性を持つことがあるからです。

新しいCSSの:whereと:is擬似クラス関数がどのようなものかについての記事です。CSS :whereと:is疑似クラス関数の詳細については、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください。