CSS詳細度計算ツール

CSS詳細度計算ツールは、CSSセレクタの詳細度を理解・比較するための無料ブラウザベースツールです。CSS詳細度は、複数のルールが同じ要素をターゲットにした場合にどのスタイルを適用するかをブラウザが決定するために使用するアルゴリズムです。より高い詳細度を持つセレクタはソース順に関係なく常に勝つため、詳細度を理解することはレイアウトやスタイリングの問題をデバッグするのに不可欠です。

詳細度は4部分のタプル(a, b, c, d)として計算されます。aはインラインスタイル、bはIDセレクタ、cはクラスセレクタ、属性セレクタ、擬似クラス、dは要素（タイプ）セレクタと擬似要素をカウントします。ユニバーサルセレクタ*、結合子（>、+、~、 ）、:where()擬似クラスの詳細度はゼロです。:not()、:is()、:has()擬似クラスは引数リストの中で最も詳細なセレクタの詳細度を取ります。

このツールはセレクタをリアルタイムで解析し、構成要素にトークン化して、詳細度レベルごとに各コンポーネントを色分けします（IDは赤、クラスは緑、要素は青）。最終スコアが表示されます。比較モードでは最大10個のセレクタを追加し、どれが勝つかをバーチャートで相対的な重みを示して即座に確認できます。CSSカスケードの問題をデバッグしたりスタイルシートをリファクタリングする際に非常に有用です。

!important宣言も検出され、通常の詳細度ルールを完全に上書きするため警告が表示されます。すべての処理はブラウザ内で行われ、データがサーバーに送信されることはなく、第三者スクリプトも関与しません。

1. CSSセレクタ入力フィールドにCSSセレクタを入力します。入力中にリアルタイムで詳細度が計算されます。
2. 入力の下にある色分けされた内訳を確認します。各トークンには詳細度レベル（ID、class、element）がラベル付けされています。
3. Enterを押すか追加をクリックして、セレクタを比較リストに追加します。
4. さらにセレクタを追加して（最大10個）並べて比較します。カンマ区切りのセレクタを入力すると一度に複数追加できます。
5. プリセット例ボタンで一般的なセレクタ比較を読み込み、詳細度の仕組みを実際に確認します。
6. 比較リストは最高から最低の詳細度順に自動的にソートされます。勝者のセレクタはトロフィーアイコンとゴールドの枠線でハイライトされます。
7. すべてコピー（またはCtrl+Shift+Cを押す）ですべての結果をクリップボードにコピーするか、クリアでやり直します。