CSS Specificity Calculator

CSS セレクタの詳細度 (a, b, c) を計算し、トークンごとに分解。複数行を入れれば勝敗を判定。:is() / :where() / :has() も正しく扱います。完全ブラウザ完結。

a = ID 数 ・ b = class / 属性 / 擬似クラス ・ c = 要素型 / 擬似要素

詳細度の数え方

詳細度は 3 つの数 (a, b, c) で、左から順に大小比較します。 どれか一つでも上位の桁が大きければ、下位の桁がいくら大きくても勝ちます (1,0,0 > 0,99,99)。

数えるもの
aID セレクタ#header
bclass・属性・擬似クラス.btn [type=x] :hover
c要素型・擬似要素div ::before

*(全称)と結合子(> + ~ や空白)は詳細度ゼロです。

多くの自作計算機が間違える所: 関数擬似クラス

:is() :not() :has() 自身は重みを持たず、 引数リストの中で最も詳細度の高いセレクタの重みになります。 一方 :where()常に (0,0,0) で、引数は完全に無料です。

ネストセレクタ &

CSS ネストの &親ルールのセレクタリストの最大詳細度 (= :is(親))になります。単一セレクタを入力するこのツールは親を知らないので、 親が無い場合の意味=:scope 相当の擬似クラス重み 0,1,0 として扱い、トークン分解にその旨を明記します。

計算ロジックは Node テスト 47 個でカバー。インラインスタイルや !important はセレクタ詳細度の外側の概念なので扱いません。