CSS詳細度計算ツール
1行に1つずつセレクタを貼り付けると、カスケードが実際に適用する順序で、それぞれの詳細度の内訳をランク付けして表示します。
結果はここに、詳細度の高い順に表示されます。
仕組み
各セレクタはコンビネータで分割され、トークン化されます。#id トークンはIDとして、
.class、[attr]、:pseudo-class トークンはクラスとして、
素の要素名と ::pseudo-elements は要素としてカウントされます。
全称セレクタ * や >、+、~ のようなコンビネータは何も加算しません。
各セレクタは最終的に (ID数, クラス数, 要素数) の3つ組になります。これはCSS仕様そのものが詳細度を定義する方法と完全に一致するため、ここでのランキングはブラウザ自身のカスケードと同じ結果になります。
すべての処理はこのページのJavaScriptでキー入力のたびに実行されます。スタイルシート丸ごとのセレクタを貼り付けても、ブラウザの外に出ることはありません。
よくある質問
詳細度はどのように計算されますか?
インラインスタイル、IDセレクタ、クラス/属性セレクタ/擬似クラス、要素・擬似要素セレクタという4段階のカウントで計算されます。下位の階層をいくつ積み重ねても上位の階層には勝てません。そのため1つのID (0,1,0,0) は常に20個のクラス (0,0,20,0) に勝ちます。
2つのセレクタが同点になるのはなぜですか?
詳細度が完全に同点の場合、CSSはソースの順序にフォールバックします。スタイルシート内で後に現れるルール（または後から追加されたルール）が勝ちます。このツールも貼り付けた順序で同点をソートし、その挙動に合わせています。
このCSSはどこかに送信されますか?
いいえ。セレクタは小さなJavaScriptのトークナイザーによって、すべてブラウザ内で解析・採点されます。アップロードは一切行われません。