CSSセレクタ 詳細度計算ツール
CSSセレクタの詳細度（Specificity）を計算するオンラインツール。複数セレクタを一括計算。:is() / :not() / :has() / :where() / :nth-child(n of S) に対応。
▼セレクタを入力してください
▼詳細度
使い方
左側のテキストエリアにCSSセレクタを1行1件で入力し、「計算 »」ボタンをクリックすると、右側に詳細度が出力されます。生成後は自動でクリップボードにコピーされます。
📝 入力形式
CSSからそのままコピーして貼り付けてもOK。末尾の { } , は自動で除去されます。
.nav a:hover
#header .nav > a { color: red; } ← { 以降は無視
:is(.foo, #bar) .baz, ← 末尾 , も無視🔢 詳細度の見方 (A, B, C)
- A： IDセレクタの数（
#id） - B： クラス・属性・疑似クラスの数（
.class/[attr]/:hover等） - C： タイプセレクタ・疑似要素の数（
div/::before等）
比較は A → B → C の順で行い、Aが大きいほど優先されます。
⚙️ 対応している特殊構文
:is(A, B)/:not(A, B)/:has(A, B)→ 引数の中で最も詳細度が高いものを採用:where(A, B)→ 常に詳細度 0（仕様通り）:nth-child(n of .sel)→of以降のセレクタも加算*&→ 詳細度なし（0, 0, 0）