カテゴリー: 開発ツール
CSS詳細度計算ツール
セレクタの詳細度をA-B-Cスコアで比較します
1つ以上のCSSセレクタを入力すると、ID・クラス・要素（A-B-C）の詳細度スコアを計算し、どのルールが優先されるかが一目でわかるように並べ替えて表示します。処理はすべてブラウザ内で完結します。
| セレクタ | 詳細度（A-B-C） | ID | クラス・属性・疑似クラス | 要素・疑似要素 |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
同じ要素を対象とする2つのCSSルールが競合したとき、勝つのは後に書かれた方ではなく詳細度の高い方です。詳細度は3つの数値で数えられます。IDセレクタの数を表すA、クラス・属性セレクタ・疑似クラスの数を表すB、要素セレクタ・疑似要素の数を表すCです。このツールは入力された各セレクタを解析します。:not()、:is()、:has()、そして詳細度が常にゼロになる:where()にも対応しており、推測に頼らずセレクタ同士を直接比較できるようA-B-Cスコアを表示します。
使い方
- 1行に1つずつ、「#nav .item > a:hover」のようにセレクタを入力します。
- 各セレクタのA-B-C詳細度スコアを確認します。
- 詳細度順に並べ替えて、競合したときにどのセレクタが優先されるかを確認します。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 入力したCSSはどこかにアップロードされますか。
- いいえ。解析はページ内で動作するJavaScriptによって行われるため、非公開のスタイルシートに含まれるセレクタがデバイスの外に出ることはありません。
- :not()や:is()、:has()はどのように採点されますか。
- CSS仕様に従い、これらは引数の中で最も詳細度が高いものの値を採用します。一方、:where()は中身に関わらず常に詳細度ゼロとして扱われます。
- インラインスタイルや!importantはこのスコアに影響しますか。
- いいえ。このツールはセレクタのみを採点します。インラインのstyle属性や!importantは、A-B-Cの数値に加算されるのではなく、通常の詳細度そのものを完全に上書きします。