01
左の列から比較する
ID、クラス・属性、要素の順に見ます。多数のクラスを足してもIDを逆転できず、同点なら入力順を保持します。
CSSセレクタツール
CSS詳細度計算ツール
セレクタを1行ずつ入力します。最上位のカンマは別候補に分け、HTML照合は必要な場合だけ有効にします。
CSS詳細度計算ツール
1行に1つ入力します。最上位のカンマは分割します。
セレクタを入力してください。
セレクタと任意のHTMLはブラウザー内で処理され、外部リソースを取得しません。
設定
入力が変わり、前の結果は古くなりました。
上書きしたはずのスタイルが効かないとき、CSS詳細度計算ツールでID・クラス・要素の列を確認すると、長いセレクタを見た目だけで判断せずに済みます。CSSセレクタ詳細度は十進数の点数ではありません。
CSS優先順位を調べる場面でも、詳細度と最終的なカスケード結果は別です。セレクタ比較に加え、必要ならHTML断片への一致数を確認できます。
CSS詳細度計算ツールを使う理由
関数型疑似クラスの差が見える
:is(#dialog, .panel)は最も高い引数の詳細度を取り、:where(#dialog, .panel)は常にゼロです。CSS詳細度計算ツールは寄与した部分を表示し、意図しないIDの影響を見つけやすくします。
一致したかどうかを混同しない
#missingは高い詳細度でも、手元のHTML断片には一致しないことがあります。.cardは低い詳細度でも一致し得ます。一致数とA-B-Cを別々に読むための図です。
比較結果を読む三つの視点
02
疑似クラスを入れ替えて試す
同じ引数で:is()と:where()を比べます。:nth-child(... of S)には疑似クラス自身の分も加わります。
03
必要なときだけHTML照合を開く
静的な断片で一致数を調べます。hoverやfocus、疑似要素の描画、最終的な宣言の勝敗までは再現しません。
A-B-C表で分かること
寄与を部分ごとに表示
ID、クラス・属性・疑似クラス、要素・疑似要素を別々に数え、どの部分が加点したかを示します。
リストを個別に採点
最上位のカンマで区切った候補は別行になります。詳細度順に並べ替えても同点の入力順は変えません。
ローカルな一致確認
任意のHTML断片を不活性な解析木として扱い、スクリプト実行や外部リソースの読み込みなしで照合します。
詳細度で判断できないこと
- カスケードの勝者は決めない
- 実際の宣言には出所、重要度、レイヤー、プロパティ、スコープや記述順が関わります。この表はセレクタの詳細度だけです。
- インラインと!importantは別の段階
- style属性と!importantをA-B-Cへ足しません。どちらもセレクタの構成要素ではありません。
- カンマ区切りに総合点はない
- 分岐ごとに詳細度が異なり、一致する要素も異なります。最上位の分岐を個別に表示します。
- 一致ゼロでも詳細度は残る
- 静的HTMLに一致しなくてもセレクタの値は消えません。hover・focusや疑似要素の描画は再現しません。
CSS詳細度計算ツールのよくある質問
CSS詳細度計算ツールの使い方は？
1行に1つ入力するとA-B-Cを表示します。カンマ区切りの最上位候補は分けて採点し、詳細度順にも並べられます。
CSS詳細度計算ツールはどのような入力とオプションに対応していますか？
:is()、:not()、:has()と詳細度ゼロの:where()に対応します。HTML照合は任意で、初期状態ではオフです。
結果はどのように確認・コピーしますか？
各候補の横に値と寄与の内訳が出ます。現在の結果にエラーがなければ、まとめてコピーできます。
入力・ファイル・結果はアップロードされますか？
いいえ。選択子とHTML断片はブラウザー内で処理し、ページが外部の画像やスクリプトを取得することはありません。
このツールが対応していないことは？
完全なスタイルシートのカスケード解析、URL取得、hoverなどの状態再現はしません。詳細度と断片への一致を調べる範囲です。
詳細度の計算に誤りがありましたか？