CSS 詳細度計算ツール
1 行に 1 つセレクターを入力して詳細度を比較します。カンマ区切りはセレクターごとに分割し、無効なセレクターは明示します。最終的な適用はレイヤーや !important が決めます。
ブラウザ内でローカルに実行 · :where() · :is() · :not() · :has() · A-B-C
1 行に 1 つセレクターを入力して詳細度を比較します。カンマ区切りはセレクターごとに分割し、無効なセレクターは明示します。最終的な適用はレイヤーや !important が決めます。
ブラウザ内でローカルに実行各セレクターは仕様の 3 つのカウンターで採点されます。A は ID セレクター、B はクラス・属性・疑似クラス、C はタイプセレクターと疑似要素です。初期表示の 3 例が結果の形を示します。#app .card:hover > h2 は 1-2-1、:where(.theme) .card:is(.featured, #hero) は 1-1-0、main article[data-kind="docs"]::before は 0-1-3 です。
セレクターはブラウザー自身のパーサーで検証され、ページ内で採点されるため、どこにも送信されません。マップ上部の行に読み取ったセレクター数と最も強いセレクターが表示され、コピーブロックには各スコアがテキストで並びます。
A は #app のような ID セレクターを数えます。B はクラス (.card)、属性セレクター ([data-kind="docs"])、疑似クラス (:hover、:focus-visible、:nth-child(2n+1)) を数えます。C はタイプセレクター (main、article、h2) と疑似要素 (::before、::selection) を数えます。全称セレクター * はどの列にも加算しません。
関数型の疑似クラスは仕様どおりに扱います。:where() は 0 を加算し、:is()、:not()、:has()、:nth-child() の of リストは最も重い引数の値になります。:is(.featured, #hero) が ID 1 相当になるのはそのためです。::part() と ::slotted() はそれぞれ疑似要素 1 として数え、引数は加算しません。
1 行のカンマ区切りリストは、その実体どおり複数のセレクターとして扱います。a, b は 0-0-1 の 2 行になります。各行は先にブラウザーのパーサーで検証され、拒否された行（孤立した結合子、三重コロンなど）も一覧に残して「無効なセレクター」と表示し、最も強いセレクターの判定からは外します。無効なセレクターがカスケードに到達することはないためです。
スコアが答えるのは「同じ要素に 2 つのセレクターが一致したとき、どちらの宣言が重みで勝つか」という 1 点です。レイヤー、!important、インラインスタイル、記述順、スコープの近さは計算を覆すことがあり、前の @layer にある低いスコアが勝つこともあります。
比較はすべてタブ内で完結し、セレクターはどこにも送信されません。行数の上限はなく、入力のたびにマップ・判定行・コピーブロックがまとめて更新されます。
このツールはテキストを比較するだけで、スタイルシートを適用しません。文書に対して一致判定は行わず、表示される数字は仕様上の重みであり、計算後のスタイルの予測ではありません。見た目の確認は、実際のページでブラウザーのインスペクターからセレクターを実行してください。