🎯 CSSセレクタ詳細度計算ツール

CSSセレクタを入力すると、ID数(A)、クラス・属性・擬似クラス数(B)、タグ・擬似要素数(C)を自動で分析し、詳細度スコアを表示します。スタイルが適用されない原因やどのルールが優先されるかを調べたいフロントエンドエンジニアに便利で、処理はすべてブラウザ内で完結しサーバーへは送信されません。

使い方

1. 入力欄に分析したいCSSセレクタを入力します(例: div.content > p::first-line)
2. 自動計算されたA(ID)、B(クラス/属性/擬似クラス)、C(タグ/擬似要素)の値を確認します
3. A-B-C形式の最終的な詳細度スコアを確認します
4. 下の一覧で、セレクタがどの要素に分解されて計算されたかを一つずつ確認します

よくある質問

詳細度スコアはどのように比較されますか?

A、B、Cの順に桁を比較します。Aが大きいセレクタが常に優先され、Aが同じならB、Bも同じならCで比較します。

:not()、:is()、:has()も計算対象ですか?

はい、これらの関数型擬似クラスは括弧内で最も詳細度が高いセレクタを基準に計算に反映されます。ただし:where()は詳細度に影響しません。

入力したセレクタはサーバーに送信されますか?

いいえ、すべての計算はブラウザ内のJavaScriptで処理され、どこにも送信されません。