CSS詳細度チェッカー｜セレクタの強さと、どの宣言が勝つかを確かめる

CSS詳細度チェッカーとは

解決できる困りごと

• ✓ID とクラスの数を数え間違えて、効かない理由を詳細度のせいだと思い込む手間が減ります
• ✓:is() や :where() を使ったセレクタの強さを、仕様を読み返さずに確かめられます
• ✓!important を足しても効かないとき、レイヤーの順番が逆になっていることに気づけます
• ✓詳細度を上げる書き換えを重ねる前に、style 属性や書いた順で負けていないかを先に確かめられます
• ✓全角の＃や全角スペースが混ざって、別のセレクタとして読まれている書き間違いを見つけられます

使い方

1. 1「セレクタを比べる」の欄に、セレクタを 1 行に 1 つ書きます
2. 2詳細度と部品ごとの内訳、勝つ順の表を読みます
3. 3宣言の勝ち負けを見たいときは「CSS を貼って勝つ宣言を調べる」に切り替えます
4. 4CSS と、必要なら style 属性の中身を貼ります
5. 5プロパティごとに、使われる宣言と、ほかの宣言が負けた理由を読みます

使用例

#main .title
.page .content .article .header .title

1 位: #main .title (1, 1, 0)
2 位: .page .content .article .header .title (0, 5, 0)
1 位（1 行目）と 2 位（2 行目）は、A（ID の数）で決まりました。A が 1 つでも多ければ、B や C がいくつあっても勝ちます。

:is(#sidebar, .panel) a
:where(#sidebar, .panel) a

:is(#sidebar, .panel) a → (1, 0, 1)
:where(#sidebar, .panel) a → (0, 0, 1)

CSS: @layer base, theme; @layer base { .button { color: gray !important; } } @layer theme { #submit { color: navy !important; } }

使われる: gray !important（.button（1 行目） / 詳細度 (0, 1, 0) / レイヤー base / !important）
負け: navy !important — レイヤーで負けました

CSS: #submit.button { padding: 8px 16px; }
style 属性: padding: 12px;

使われる: 12px（style 属性）
負け: 8px 16px — style 属性で負けました

活用シーン

技術的な解説

もっと詳しく

よくある質問

参考・出典

• Selectors Level 4 — Calculating a selector's specificity — W3C
• CSS Cascading and Inheritance Level 5 — Cascade Sorting Order — W3C
• CSS Nesting Module — Nesting Selector — W3C

本ツールの計算式・判定基準は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。