CSS詳細度（specificity）計算機
CSSセレクタの詳細度を(a, b, c)の形で計算し、複数のセレクタを比べてどのルールが勝つかを調べます。1行に1つずつセレクタを入力してください。同じ詳細度なら後に書いた方が優先されます。正規表現の調査には正規表現テスターもご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
結果
使い方
- 比べたいセレクタを1行に1つずつ入力します（サンプルを挿入して試せます）。
- 各行の詳細度(a, b, c)と、一番優先されるセレクタが表示されます。
- CSSネストの&を使うときは、親セレクタを入力すると&が親の詳細度として計算されます。
注意事項
- 詳細度は(a, b, c)で表し、aはIDセレクタ、bはクラス・属性・疑似クラス、cは要素（タイプ）と疑似要素の数です。左の桁が大きい方が優先され、桁をまたいだ繰り上がりはありません（例: クラス11個でも1個のIDには勝てません）。
- :is()・:not()・:has()は引数の中で最も大きい詳細度になり、:where()は常に0です。:nth-child(… of S)は疑似クラス分の1に、Sの最大詳細度を足します。
- 疑似要素（::before など）は要素と同じcに数えます。ユニバーサルセレクタ(*)と結合子（> + ~ と空白）は0です。
- カンマ区切りのセレクタは、それぞれが独立したルールとして扱われますが、このツールでは1行に書かれた場合の最大値を表示します。
- インラインstyle属性は(a, b, c)より上位にあたり、どのセレクタにも勝ちます。!importantの付いた宣言は、通常の宣言より優先され、詳細度とは別の段階で比較されます。このツールは詳細度のみを計算し、これらは対象外です。
- CSSネストの&は、親セレクタを:is()で包んだものとして計算します。&を含まないネスト内のセレクタには、先頭に暗黙の&が付くものとして親の詳細度を加えます。
- カスケードレイヤー（@layer）や読み込み順、継承は考慮しません。実際の優先順位はブラウザの開発者ツールでも確認してください。
用語解説
詳細度（specificity）
複数のCSSルールが同じ要素に当たったとき、どのルールを適用するかを決める重みです。セレクタの種類ごとに数えた(a, b, c)を左の桁から順に比べます。
:where()
:is()と同じく引数のいずれかに一致する要素を選びますが、詳細度は常に0です。ライブラリの既定スタイルを上書きされやすくしたいときに使われます。
カスケード
宣言の出どころ・!important・レイヤー・詳細度・記述順を順に比べて、最終的に適用する値を決める仕組みです。詳細度はその一段階にすぎません。
よくある質問
CSSの詳細度(a, b, c)はどう数えますか？
aはIDセレクタ、bはクラス・属性セレクタ・疑似クラス、cは要素セレクタと疑似要素の数です。左の桁から順に比べ、桁の繰り上がりはありません。例えば #a は (1,0,0)、ul li.red は (0,1,2) です。
:is()・:not()・:has()・:where()の詳細度はどうなりますか？
:is()・:not()・:has()は引数に並べたセレクタのうち最も大きい詳細度になります。:where()は引数に何を書いても0です。例えば :is(#a, .b) は (1,0,0)、:where(#a) は (0,0,0) です。
同じ詳細度のセレクタが複数あるときはどちらが勝ちますか？
詳細度が同じ場合は、CSSの中で後に書かれたルールが勝ちます。このツールでも入力の下の行を後に書かれたものとして扱い、同点なら下の行を勝ちにしています。
インラインstyleや!importantは計算されますか？
いいえ。インラインstyleはセレクタの詳細度より上位、!importantは詳細度とは別の段階で比較されるため、このツールの計算対象外です。注意事項に概要を載せています。
「不正なセレクタ」と表示されるのはどんなときですか？
括弧・属性セレクタ・引用符が閉じていない、#や.の後に名前がない、結合子（> + ~）の前後が空、波括弧など使えない文字を含む、といった場合です。該当する行だけにエラーを表示し、他の行は計算します。
このページをシェア