CSS詳細度計算ツール

CSSセレクタを入力するとスコア (a, b, c, d) を即座に計算。複数セレクタを比較してカスケードの優先順位を視覚的に確認できます。

詳細度スコア (a, b, c, d)

インライン
スタイル (a)

IDセレクタ (b)

クラス・
属性・
擬似クラス (c)

要素・
擬似要素 (d)

(0, 0, 0, 0)

インライン (a)

ID (b)

クラス等 (c)

要素等 (d)

インラインスタイル

IDセレクタ

クラス / 属性 / 擬似クラス

要素 / 擬似要素

結合子（カウントなし）

セレクタがまだ追加されていません。セレクタを入力して「+ 比較追加」をクリックしてください。

a — インラインスタイル

HTML要素に直接書かれたスタイル (style="...")。最も優先度が高く、セレクタより常に勝ります。

b — IDセレクタ

#id 形式のセレクタ。非常に高い詳細度。クラスや要素が何個あっても1つのIDが勝ります。

c — クラス・属性・擬似クラス

クラス (.class)、属性 ([attr])、擬似クラス (:hover、:nth-child()) などが対象です。

d — 要素・擬似要素

タイプセレクタ (div、p) と擬似要素 (::before、::after)。最も低い詳細度です。