CSS詳細度（Specificity）計算ツール
CSSセレクタの優先順位（A-B-C）をその場で計算します
CSSセレクタを入力するだけで、ID（A）、クラス・属性・擬似クラス（B）、要素・擬似要素（C）の数を自動で解析し、詳細度スコアを表示します。「なぜスタイルが効かないのか」「どのルールが優先されるのか」で悩んだときに、フロントエンドエンジニアやコーダーの方に役立ちます。入力したセレクタはブラウザ内だけで処理され、サーバーに送信されることはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 入力欄に解析したいCSSセレクタを入力します（例：div.content > p::first-line）
- 自動計算された A（ID）、B（クラス／属性／擬似クラス）、C（要素／擬似要素）の値を確認します
- A-B-C 形式の最終的な詳細度スコアを確認します
- 下部のリストで、セレクタがどの構成要素に分解されて計算されたのかを一つずつ確認します
よくある質問
- 詳細度スコアはどのように比較するのですか？
- A、B、C の順に桁ごとに比較します。A が大きいセレクタが常に優先され、A が同じ場合は B、B も同じ場合は C を比較します。
- :not()、:is()、:has() のようなセレクタも計算されますか？
- はい。これらの関数型擬似クラスは、カッコ内のセレクタのうち最も詳細度の高いものを基準に計算へ反映されます。ただし :where() は詳細度に影響しません。
- 入力したセレクタはサーバーに送信されますか？
- いいえ。すべての計算はブラウザ内のJavaScriptで処理され、どこにも送信されません。