ファンクション

最近CSSのいくつかのラインをスキミングした後、私はライン上で読んでいたことを理解し、これまで見たことがないことを理解した.私は、ちょうど遭遇しました:is() 初めての擬似クラス関数です.

header :is(h1, a) {
    color: green;
    font-family: sans-serif;
}

上記のコードが任意の色とフォントを対象とするのは簡単ですh1 or a ヘッダー要素内のタグ.上記の規則を書くもう一つの方法は以下の通りです.

header h1,
header a {
    color: green;
    font-family: sans-serif;
}

あなたが2つまたは3つ以上の要素をターゲティングしていたならば、それが書くことがそれほどそれほど少ないと思わないかもしれません.コードは非常に長いと繰り返し使用することなく:is() . 以下のコードを書くことは一般的にバグが少ないことにつながりますが、この擬似クラスを使うのはそれだけではありません.
あなたがセレクタの長いチェーンを持っていて、それらのうちの1つが無効であるなら、1つのエラーがCSS規則全体を無効にするということです.ブラウザは完全にそれをスローします.

header h1,
header :a {
    color: green;
    font-family: sans-serif;
}

上の例を使用して、誤ってアンカータグの前にコロンを置くようにしましょう.今のルールは無効です.どちらもh1 sまたはリンクはこの規則にアクセスすることができます.一方、これを使って書かれたなら:is() 擬似クラス、無効でない他のセレクタはまだ規則に影響を受けます.

header :is(h1, :a) {
    color: green;
    font-family: sans-serif;
}

上の例では、アンカータグが無効ですが、ブラウザはまだH 1タグの規則を使用します.無効なセレクタのみがブラウザで無視され、:is() 擬似クラス.
また、ロジックを逆にすることができます.前の例ではh1 ヘッダー要素内のsとアンカー.もう一つの使い方:is() 特定のセレクタの機能を多くの要素で対象とすることです.下記の中で、我々はmain , .title , and p ホバーに紫の色を付けてください.

:is(main, .title, p) a:hover {
    color: purple;
}

注意する1つのことは、それが特異性のレベルに続くということです.クラスで何かを目標にしましょう.title または主な要素の段落タグとオレンジ色を与える.

main :is(.title, p) {
    color: orange;
}

CSSファイルでさらに下に想像すると、段落の色を赤に再試行しようとします.

main p {
    color: red;
}

あなたは色がオレンジのままであることを知るために驚くかもしれません.これは、色がもともとどんなセレクターにも、それがそれに渡されたとき、特異性の最高ランクを持っていたので、結びつけられたからです:is() 擬似クラス.この場合、.title 最高の特異性を持っていたp …の色に.title , その結果、段落のテキストは赤のままです.If the .title クラスは以前に呼ばれていませんでした:is() 擬似クラス、段落テキストの色は、段落タグが最も高い特異性を持つセレクタになったので、最新の規則の色に実際に更新されます.
このミニダイブ:is() 私の好奇心を起こさせたコードの断片に遭遇した結果でした.好奇心旺盛!学ぶことは常にあります.

ソースMDN