CSS詳細度チェッカー

セレクタを1行に1つ（カンマ区切りも可）入れると、詳細度 (A, B, C) を計算して強い順に並べます。「なぜこのスタイルが効かないの？」の確認に。

強い順

    数え方のルール

    CSS詳細度チェッカーでできること

    CSSのセレクタを入れると、詳細度 (A, B, C) を自動で数えて強い順に並べます。「書いたスタイルが効かない」「どちらが優先されるか分からない」ときに、原因を確かめられます。

    使い方

    1. 入力欄にセレクタを1行に1つ入れます。カンマ区切りや、{ } 付きのCSSをそのまま貼っても読み取ります。
    2. 「強い順」に順位と (A, B, C) の3つの数字が出ます。A はID、B はクラス・属性・擬似クラス、C は要素・擬似要素の数です。
    3. 各セレクタの下のチップで、どの部分がどこに数えられたか（ID・クラス・要素・結合子など）を確認します。
    4. 上の囲みで、1位が2位に勝つ理由（どの桁で差がついたか）を確認します。最初の例は「例を入れる」で戻せます。
    5. 入力を消したいときは「すべて消す」を2回続けて押します。

    計算の仕組みと注意点

    よくある質問

    CSSの詳細度はどうやって計算しますか？

    IDの数を A、クラス・属性・擬似クラスの数を B、要素・擬似要素の数を C として (A, B, C) で表し、左の桁から比べます。たとえば #main .card > h2 は (1, 1, 1) です。入力欄に入れると内訳つきで確認できます。

    :where() と :is() の違いは何ですか？

    どちらもカッコ内のどれかに当てはまれば一致しますが、:is() はカッコ内でいちばん強いセレクタの詳細度になり、:where() は常に0です。:where(.btn) span と :is(.btn) span を並べて入れると差が分かります。

    クラスを10個重ねればIDに勝てますか？

    勝てません。詳細度は桁ごとに比べるため、B がいくつあっても A が1つ多いほうが強くなります。#a と .a.b.c.d.e.f.g.h.i.j を入れると、#a が1位になります。

    !important やインラインstyleは詳細度に入りますか？

    どちらもセレクタの詳細度とは別の扱いです。インラインstyleはどのセレクタよりも強く、!important 付きの宣言はさらにその上になります。このツールでは注記つきでセレクタより上に並べます。