CSS 詳細度カリキュレーター - セレクタの重みを分解・比較

CSS 詳細度について

詳細度が決めること

詳細度は CSS カスケードの一段階です。同じ要素・プロパティに対する宣言では、オリジン、重要度（!important）、カスケードレイヤーが優先されます。これらと他の優先条件が同じ場合に、セレクタの (a, b, c) を左から比較します。重みが等しい場合も、ソース順の前にスコープの近さを比較することがあります。

3 つの列

a 列は ID セレクタ、b 列は class・属性・pseudo-class、c 列は要素型・pseudo-element を数えます。全称セレクタ・結合子・:where() は加算されません。:is()・:not()・:has() は最も具体的な引数の詳細度を寄与します。このツールは各トークンを色分けし、どの列に加わるかを見せます。

この比較で分かること

各欄には有効なセレクタを 1 つ入力してください。DOM との一致、宣言の !important、インラインスタイル、レイヤーは調べないため、実際の適用スタイルは判定できません。カンマ区切りのセレクタリストでは、要素に一致するセレクタの重みではなく、リスト内の最大の重みを表示します。無効な入力でも (0, 0, 0) が表示されることがあり、有効な詳細度ゼロのセレクタであるとは限りません。

よくある質問

このテーマに関するよくある疑問と回答をまとめました。

なぜ私の CSS が適用されないのですか？

詳細度は原因の一つにすぎません。ブラウザの開発者ツールで、セレクタが要素に一致するか、宣言が有効か、メディアクエリなどの条件を満たすかを確認してください。そのうえで !important、レイヤー、インラインスタイルなどのカスケード条件を調べます。このツールはセレクタの重みだけを比較し、ページや実際の適用スタイルは調べません。

:where() と * はなぜ 0 なのですか？

:where() は詳細度を加えないよう設計されており、中身を上書きしやすくします。全称セレクタ * と結合子も加算しません。対して :is() と :not() は最も具体的な引数の詳細度を取ります。

入力したセレクタはサーバーに送信されますか？

このツールはブラウザ内でセレクタを解析・比較し、計算のためにサーバーへ送信しません。

!important やレイヤーは (a, b, c) を変えますか？

変えません。セレクタの詳細度を増やさずに、カスケードの優先順位に影響します。そのため (a, b, c) が大きくても宣言が優先されるとは限りません。作成者のスタイルシート内の宣言では、通常の宣言は後のレイヤー、重要な宣言は前のレイヤーが優先されます。レイヤー外の通常の宣言はレイヤー内より優先されますが、重要な宣言では逆になります。