A SMALL TOOL FOR CLEARER UNDERSTANDING
CSSセレクターの詳細度
セレクターを入力して、スタイルの優先順位を決める「詳細度」を確かめましょう。
計算結果
1件article:has(> #notice) p
1ID
0クラス・属性
擬似クラス
擬似クラス
2要素
擬似要素
擬似要素
詳細度：(1, 0, 2)
詳細度の読み方
ID、クラスなど、要素などの3つの値を左から順に比較します。単純に足し合わせる数値ではありません。
このツールはセレクターの詳細度を扱います。!important、インラインスタイル、カスケードレイヤーなどを含む、最終的なスタイルの優先順位全体を判定するものではありません。
:is()・:not()・:has()・:where()・:nth-child()（ofを含む）に対応します。CSS構文全体の検証は行いません。エスケープ、&を使うネスト、名前空間、未対応の関数は計算できません。