CSS詳細度計算機

CSS詳細度とは、CSSセレクターに割り当てられた重みで、複数のルールが同じ要素に一致するときにどのスタイルルールが適用されるかを決定します。(a, b, c)の3部構成の値で表され、aはIDセレクター、bはクラス/属性/疑似クラスセレクター、cは要素タイプと疑似要素セレクターを数えます。

詳細度はセレクター内の3つのカテゴリーを数えることで計算されます：(a) #headerのようなIDセレクター、(b) クラスセレクター(.card)、属性セレクター([type="text"])、疑似クラス(:hover, :nth-child)、(c) タイプセレクター(div, p)と疑似要素(::before)。ユニバーサルセレクター(*)とコンビネーター(+, ~, >)は詳細度を持ちません。

詳細度が高いセレクターが勝ちます。(a, b, c)の値を左から右へ比較します：より多いID (a)は常により多いクラス(b)に勝ち、より多いクラスは常により多い要素(c)に勝ちます。詳細度が等しい場合は、スタイルシートで後に出現するルールが勝ちます。

数値スコアはセレクターを順位付けするための簡略化された比較可能な値(a * 10000 + b * 100 + c)です。CSS値として解釈すべきではありません — CSS詳細度は単一の数値ではなく3部構成の比較です。

!importantは詳細度の一部ではありません — 詳細度に関係なく他のすべての宣言を上書きします。このツールはセレクターの詳細度のみを計算し、!importantの効果は考慮しません。本番CSSでの!importantの使用は避けてください。

いいえ。ユニバーサルセレクター(*)の詳細度はゼロ(0, 0, 0)です。コンビネーター(+, >, ~, スペース)も詳細度に寄与しません。ID、クラス、属性、疑似クラス、要素、疑似要素のセレクターのみが詳細度を増加させます。

:not()疑似クラス自体は詳細度を持ちませんが、その中のセレクターは持ちます。例えば、:not(#id)は詳細度に(1, 0, 0)を追加します(1つのID)。このツールは括弧内の引数を解析することで:not()を正しく処理します。

::は疑似要素の現代的な二重コロン構文(::before, ::after, ::placeholder)です。単一コロンのレガシー構文(:before, :after)はブラウザーでまだサポートされていますが非推奨です。どちらもc(要素/疑似要素)カウントに1を加えます。

インラインスタイル(例：style="color: red")の詳細度は(1, 0, 0, 0)で — どのセレクターよりも高く — このツールでカバーされない第4カテゴリーとして表されます。実際には、インラインスタイルはスタイルシートのルールを常に上書きします(!importantが使用されない限り)。

はい。2つのセレクターが同じ(a, b, c)値を持つ場合、ソース順序で後に現れる方が勝ちます。このツールは同一スコアの場合は同じランクで表示し、(a, b, c)の内訳で真の等価性を確認できます。

詳細度が高いとスタイルの上書きや保守が困難になります。スタイルを上書きするには、さらに具体的なセレクターを書くか!importantを使用する必要があります。詳細度を低く保つと、特に大規模コードベースでCSSがよりモジュール化され予測可能になります。

このツールはID、クラス、属性、疑似クラス(包含:not())、疑似要素、タイプセレクターなど最も一般的なCSS3セレクターをサポートします。:is()、:where()、:has()などの複雑な現代的セレクターは完全に解析されない場合があります。