メインコンテンツへスキップ

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 なし。

このツールをもっと活用する

もっと学びたい方へ

チートシート・技術記事・開発リソースで学習を加速