このツールについて

セレクターの古典的な詳細度 (a,b,c) を計算し、なぜ一方の規則が勝つのかを DevTools を開かずに確認できます。判定対象はセレクターそのもので、記述順や @layer は考慮しません。

使い方

セレクターを入力または貼り付けて計算を実行し、ID・クラス・要素それぞれの内訳を読み取ります。数値が小さいほど、後から上書きしやすい設計です。

例のセレクターは要素とクラスが混ざった、古いナビゲーション 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 が頻繁に必要になるなら、本当の問題は積み上がった詳細度の負債です。

詳細度はどう計算されますか?

3 つのグループを数えます。ID、次にクラス・属性・擬似クラス、最後に要素・擬似要素です。結果は (a,b,c) で表示され、左から順に比較されます。

!important やインラインスタイルはここに表示されますか?

いいえ。これらはセレクターの外にあるため (a,b,c) には含まれません。インラインスタイルや !important は、どのセレクターの詳細度よりも優先されます。