CSS詳細度計算機

このツールでできること

• CSS詳細度計算機では、CSSセレクタの詳細度(Specificity)をID・クラス・要素別にスコア計算。
• 関連する観点として CSS詳細度、specificity、セレクタ優先度 を確認し、結果をコピーして別の作業に使えます。

使い方

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

入力例・出力例

よくある利用シーン

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

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• CSS詳細度、specificity、セレクタ優先度の観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

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

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

• CSS詳細度計算機の主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール