CSS 詳細度計算機

使い方

1. CSS セレクタを入力または貼り付け — 入力に応じて分析更新。
2. (ID, クラス, タイプ) 数字を確認 — タプル高い方がカスケード勝利。
3. 比較ボックスに 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 を使用。

関連ツール