CSS Specificity 計算ツール
CSSセレクターの詳細度(specificity)を(a, b, c)形式で計算。複数セレクターの比較も可能。
サンプル:
Specificity の読み方
a
IDセレクター
#header, #nav など
b
クラス・属性・疑似クラス
.active, [href], :hover など
c
タイプ・疑似要素
div, p, ::before など
比較ルール: aを最初に比較。同じならb、同じならcで比較。
例: (1,0,0) > (0,99,99) — IDは必ずクラスより強い。
:not()・:is(): 引数の最大specificityを採用。
:where(): 常に(0,0,0)。
*(ユニバーサル): specificity なし。