CSS詳細度計算ツール
任意のCSSセレクタの詳細度を計算します。2つのセレクタを比較して、どのルールが優先されるか理解し、詳細度スコアリングシステムを学びます。
Load a preset into Selector A
Specificity Scoring
ID selectors — (a)
#header, #nav
Class / attr / pseudo-class — (b)
.btn, [type=text], :hover
Type / pseudo-element — (c)
div, p, h1, ::before
Universal selector (*), combinators, and :where() contribute 0 specificity.
CSS詳細度計算ツールの使い方
- 1入力フィールドにCSSセレクタを入力します。
- 2詳細度スコアがID、クラス、要素ごとに分解して表示されます。
- 3オプションで2番目のセレクタを入力して、どちらが優先されるかを比較できます。
- 4セレクタのカスケーディングルールを理解します。
Zenovayアナリティクス
関連ツール
よくある質問
CSS特異性はどのように計算されますか？▾
CSS特異性は、トリプル（a, b, c）として計算されます：a = IDセレクター（#id）の数、b = クラスセレクター（.class）の数、属性セレクター（[attr]）、疑似クラス（:hover）、c = タイプセレクター（div、p）と疑似要素（::before）の数。インラインスタイルの特異性は（1,0,0,0）です。すべてのスタイルシートルールを上回ります。!importantはすべての特異性をオーバーライドします。ユニバーサルセレクター（*）、コンビネーター（+、>、~、スペース）、:is()/:not()は特異性を追加しません。
競合があるとき、どのセレクターが勝ちますか？▾
特異性が高いセレクターが勝ちます。特異性が等しい場合、スタイルシートで後に表示されるルールが勝ちます（ソース順）。比較するには：（1,0,0）は（0,9,9）を上回ります。IDはクラスの任意の数より優先されるためです。比較は算術ではなく、辞書式です：最初に（a）を比較し、次に（b）を、次に（c）を比較します。1つのIDは常にクラスの任意の数を上回ります。
:is()、:not()、:where()の特異性は何ですか？▾
:is()と:not()は、最も具体的な引数の特異性を取ります：:is(#id、.class)の特異性は（1,0,0）です。#idが最も具体的な引数であるため。:where()は引数に関係なく常にゼロの特異性を持ちます。簡単にオーバーライドしたいユーティリティクラスに便利です。:not()自体はゼロを提供しますが、内部の引数は通常に提供されます。
!importantはどのように特異性に影響しますか？▾
!importantは、それが適用されるプロパティのすべての特異性をオーバーライドします。ただし、特異性スコアは変更されません。!importantを持つ2つの宣言は、通常の特異性で比較されます。ベストプラクティス：!importantを避けてください。サードパーティのスタイルシートをオーバーライドする必要がある場合は、代わりに特異性を増やしてみてください。!importantは、.visually-hiddenまたは.sr-onlyなど、オーバーライドされてはいけないユーティリティクラスに対してのみ使用します。
インラインスタイルの特異性は何ですか？▾
インラインスタイル（style="color: red"）は、セレクターベースのルールの最高の特異性を持ち、インラインを含む4部記号で（1,0,0,0）と記述されます。スタイルシート内のセレクターは、!importantなしでインラインスタイルをオーバーライドすることはできません。これがCSSフレームワークがしばしばインラインスタイルを避ける理由です。オーバーライドが難しすぎます。メンテナンス可能なコードのため、インラインスタイルの代わりにCSSカスタムプロパティまたはクラスを使用します。