a = ID 数 ・ b = class / 属性 / 擬似クラス ・ c = 要素型 / 擬似要素
詳細度の数え方
詳細度は 3 つの数 (a, b, c) で、左から順に大小比較します。
どれか一つでも上位の桁が大きければ、下位の桁がいくら大きくても勝ちます
(1,0,0 > 0,99,99)。
| 桁 | 数えるもの | 例 |
|---|---|---|
| a | ID セレクタ | #header |
| b | class・属性・擬似クラス | .btn [type=x] :hover |
| c | 要素型・擬似要素 | div ::before |
*(全称)と結合子(> + ~ や空白)は詳細度ゼロです。
多くの自作計算機が間違える所: 関数擬似クラス
:is() :not() :has() 自身は重みを持たず、
引数リストの中で最も詳細度の高いセレクタの重みになります。
一方 :where() は常に (0,0,0) で、引数は完全に無料です。
:is(#a, p)→1,0,0(#aと同じ):where(#a, p)→0,0,0(無料)li:nth-child(2 of .foo)→ 擬似クラス分の 1 つ +.foo=0,2,1
ネストセレクタ &
CSS ネストの & は 親ルールのセレクタリストの最大詳細度
(= :is(親))になります。単一セレクタを入力するこのツールは親を知らないので、
親が無い場合の意味=:scope 相当の擬似クラス重み 0,1,0
として扱い、トークン分解にその旨を明記します。
&→0,1,0&.active→0,2,0(:is(親).activeと同じ)
計算ロジックは Node テスト 47 個でカバー。インラインスタイルや !important はセレクタ詳細度の外側の概念なので扱いません。