入力を貼り付ける
CSS・HTML・JSON などをエディタに貼ります。アップロードはしません。
CSS 詳細度計算ツール
セレクタの詳細度を計算。
使い方
貼り付け → 実行 → 確認 → コピー。すべてはブラウザ内で完結します。
ツールを実行する
変換または実行をクリック。結果はすぐに表示されます。
出力を確認する
生成コードと注意書きを公開前に確認します。
コピーして使う
出力をコピーしてプロジェクトに貼り付けます。
このツールについて
セレクターの古典的な詳細度 (a,b,c) を計算し、なぜ一方の規則が勝つのかを DevTools を開かずに確認できます。判定対象はセレクターそのもので、記述順や @layer は考慮しません。
例
例のセレクターは要素とクラスが混ざった、古いナビゲーション CSS によくある形です。
入力
nav.site-header .menu a.active出力
Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2ヒント
!important が頻繁に必要になるなら、本当の問題は積み上がった詳細度の負債です。