CSS 詳細度計算機
2 つの CSS ルールが同じ要素を対象とすると、カスケードは詳細度が高い方を選ぶ — (ID, クラス/属性/疑似クラス, タイプ/疑似要素) でカウント。本ツールはセレクタを解析し、各部分にウェイト付与（#id +1·0·0、.class +0·1·0、div +0·0·1）、:is()·:not()·:has()（最高ウェイト引数勝ち）·:where()（常に 0）のような疑似クラス処理。2 つのセレクタを入力してどちらがカスケードで勝つか確認 — ルールが適用されない理由を推測する必要なし。
ID
1
クラス/属性/疑似
2
タイプ/疑似要素
3
トークン分析
#navID+(1, 0, 0)ulタイプ+(0, 0, 1)liタイプ+(0, 0, 1).activeクラス+(0, 1, 0)aタイプ+(0, 0, 1):hover疑似クラス+(0, 1, 0)
2 つのセレクタを比較
2 つ目のセレクタを貼り付けてどちらが勝つか確認。
セレクタ A
(1, 2, 3)
← A 勝ち
セレクタ B
(0, 1, 3)
例
インラインスタイル·!important·ソース順すべてセレクタ詳細度に勝つ。本ツールはセレクタ自体から (ID, クラス, タイプ) タプルのみ計算。
使い方
- CSS セレクタを入力または貼り付け — 入力に応じて分析更新。
- (ID, クラス, タイプ) 数字を確認 — タプル高い方がカスケード勝利。
- 比較ボックスに 2 つ目のセレクタを貼り付け、どちらが勝つか確認。
よくある質問
- なぜ 1 つでなく 3 つの数字？
- 詳細度は左から列ごとに比較: ID 1 つはどんな数のクラスにも勝つ; クラス 1 つはどんな数のタイプセレクタにも勝つ。(0,1,0) + (0,0,10) = 20 のように足す直感は CSSWG が警告する典型的な誤り。
- :is()·:not()·:has() のカウント？
- 最高ウェイト引数の詳細度を取る。:is(#a, .b) = 1·0·0、:not(.a, .b) = 0·1·0。:where() は常に 0·0·0 — 詳細度 0 オーバーライドに便利。
- ::before などの疑似要素は？
- 疑似要素（::before·::after·::first-line）はタイプセレクタとしてカウント（0·0·1）。レガシーの単一コロン形式（:before·:after）も疑似要素として認識。
- インラインスタイルは含む？
- いいえ — インラインスタイルは別の 'a' バケット（1·0·0·0）で、本ツールはモデル化せず、セレクタにインラインは書けない。インラインオーバーライドには !important を使用。
関連ツール
CSS セレクターテスター
HTML に対して CSS セレクターをテストし、どの要素にマッチするかを正確に確認します。ブラウザ上で動作します。
不可視 / ゼロ幅文字検出
貼り付けたテキストの NBSP・ゼロ幅・双方向マーク・タブを検出 — まとめてクリーンアップ。
CSS Flexbox プレイグラウンド
flex-direction・justify-content・align-items・gap をクリックで調整 — CSS や Tailwind クラスをコピー。
HTML / CSS / JS ミニファイア
HTML / CSS / JavaScript の空白とコメントを除去 — 削減サイズを表示してコピー。
CSS Grid プレイグラウンド
grid-template-columns / rows・gap・アイテム整列を視覚的に — CSS をそのままコピー。
CSS to JS スタイルオブジェクトコンバーター
CSS 宣言ブロックを React/JS のインラインスタイルオブジェクトにブラウザ上で変換します。