新しい CSS :where および :is 疑似クラス関数とは何ですか?

:is と :where とは何ですか?

:is()と:where()は、セレクターを作成するときに短縮したり繰り返しを停止したりするのに役立つ疑似関数です。これらはすべてセレクターの配列 (id、class、tag など) を受け入れ、そのリストで選択できる任意の要素を選択します。

これは、セレクターを短く書くのに役立つという点ではおそらくあまり意味がないので:where() 和:is()を使用してみましょう。

:is と :where の使い方は?

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

.btn span > a:hover、
#ヘッダー span > a:hover,
#フッター span > a:hover {
  ...;
}

こんな感じになる

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

そして:is()はこの例に同じものを追加するのに役立ちます

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

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

:where()と:is()は見た目も機能も同じですが、覚えておくべき違いが 1 つあります。それは、特異性が異なるということです。:where()は単純で、常に詳細度は 0 ですが、 :is()セレクターの中で最も詳細度が高くなります。

CSS の特異性とは (簡単に言うと) 何ですか?

CSS には 4 つの詳細度レベルがあります。各レベルまたはカテゴリには異なるスコアがあり、すべてのスコアを合計してセレクターの特異性を計算できます。

セレクターの数が最も多い要素にはそのスタイルが適用されます。そのため、CSS を記述してもスタイルが適用されず、開発者ツールで取り消し線が引かれて表示される場合があります。

特異度評価スコア

• ID - 特異度スコアは100
• インラインスタイル – 詳細度スコアは 1000
• 要素と疑似クラス – 詳細度スコア 1
• クラス、疑似クラス、属性 – 詳細度スコアは 10

例えば

ボタン.btn {
  色: 赤;
}
.btn{
  色: 緑;
}

.btn = 10

ボタン = 1 + 10 = 11

<button>タグに.btnクラスを配置すると、 button.btnセレクターのスコアが.btnセレクターよりも高いため、テキストが赤に変わります。

ご覧のとおり、疑似クラスには 2 つの異なるレベルの詳細度があります。これは、使用する疑似クラスとその使用方法に応じて、異なる疑似クラスに異なるレベルの詳細度を持たせることができるためです。

新しく追加された CSS :where および :is 疑似クラス関数についての説明はこれで終わりです。CSS :where および :is 疑似クラス関数に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。