CSS詳細度計算機

このツールでできること

• CSS詳細度計算機では、CSSセレクタの詳細度(Specificity)をID・クラス・要素別にスコア計算。

使い方

1. テキストエリアに比較したいCSSセレクタを1行1つずつ入力します（初期状態でも5つのサンプルセレクタが入っています）。
2. 入力するたびに各セレクタの詳細度が(ID, クラス/属性/疑似クラス, 要素/疑似要素)の3つの数字で自動計算されます。
3. 一覧は詳細度が高い順に自動で並び替えられ、最も強いセレクタに「最強」のラベルが付くので、どちらが優先されるか一目で分かります。
4. 属性セレクタ([disabled]など)や疑似クラス(:hoverなど)は2つ目の数字（クラス相当）にカウントされる点を、実際のCSSと照らし合わせながら確認します。

入力例・出力例

よくある利用シーン

• 同じ要素に複数のCSSルールが当たっていて、どちらのスタイルが優先されるか原因を切り分けたいとき。
• コンポーネントのCSS設計時に、意図せず詳細度が高くなりすぎているセレクタがないか一覧で比較したいとき。
• 属性セレクタや疑似クラスを使ったセレクタの詳細度が、クラスと同じ重みで計算されることを確認したいとき。
• リファクタリング前に既存のセレクタをまとめて貼り付け、詳細度順に並べて整理の優先順位を決めたいとき。

結果確認のポイント

• CSSや設定値を生成するツールでは、実装へ反映して対象の表示を確認してください。参照表では、掲載値の単位・前提・対象環境を確認してから採用してください。
• 表示された前提や単位が目的と一致しているか見直してください。
• 結果を他の場所へ転記する場合は、利用先で改行・記号・値が変わっていないか確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• CSS詳細度計算機の主要な処理はブラウザ内で実行されます。
• 保存の有無はツールによって異なります。ブラウザ内の保存領域を使う機能では、ページを閉じても設定や作業内容が残る場合があります。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

アクセス解析・広告・保存データの詳しい取り扱い

よくある質問

関連ツール