CSS詳細度計算

CSSセレクタを(a,b,c)の詳細度タプルで採点します。カスケードのデバッグ前にどのルールが勝つか比較できます。

セレクタはこのブラウザ内だけで処理します。送信はしません。

ID → クラス・属性・擬似クラス → 型・擬似要素の順に数えます。:is()/:not()/:has()は最も強い引数、:where()は0、全称セレクタは0です。旧式の単一コロン擬似要素（:before）は擬似要素として数えます。採点の参考用で、スタイル適用はしません。

使い方

  1. セレクタを貼ります（カンマ区切りまたは1行に1つ）。
  2. 各セレクタのa,b,cスコアを強い順に確認します。
  3. 大きいタプルが勝ち、同点はソース順です。

対応範囲

ID → クラス・属性・擬似クラス → 型・擬似要素の順に数えます。:is()/:not()/:has()は最も強い引数、:where()と全称は0です。インラインstyleと!importantはセレクタより上で採点しません。50セレクタまで。

関連する道具

関連ガイド