広告が嫌いですか? 行く広告なし今日 

CSS 特異性計算機

色開発者

広告削除する？

入力

自動処理

出力

クライアント側

広告削除する？

ガイド

CSS 特異性計算機

CSSの特定性計算機は、任意のCSSセレクタの正確な特定性スコアを決定するのに役立ちます。特定性の理解は、CSSの衝突を診断し、維持性の高いスタイルシートを書く上で極めて重要です。1つ以上のセレクタを入力し、そのスコアを並列で比較できます。

使用方法

入力フィールドに1行につき1つのCSSセレクタを入力してください。このツールは自動的に各セレクタの特定性スコアを計算し、表示します。複数のセレクタが入力された場合、特定性が最も高いセレクタは緑色で強調され、どのルールが優先されるかをすぐに確認できます。

機能

W3C準拠スコアリング – 官方の(a,b,c)アルゴリズムを使用して特定性を計算します：ID、クラス/属性/擬似クラス、および要素/擬似要素。
複数セレクタの比較 – 複数のセレクタを入力して、特定性スコアを比較し、どのセレクタが優先されるかを確認できます。
CSSセレクタレベル4 – :is()、:not()、:has()、:where()などの現代的な擬似クラスをサポートし、正確な特定性処理を行います。
視覚的なスコア表示 – 色分けされたスコアバッジと比例バーにより、特定性を一目で理解できます。
クライアント側処理 – すべての計算はブラウザ内で行われます。サーバーにデータが送信されません。

広告削除する？

 よくある質問

CSSの特定性とは何ですか？どのように計算されますか？

CSSの特定性は、複数のルールが同じ要素をターゲットにしたときにどのルールが適用されるかを決定する重みシステムです。特定性は3つの部分のスコア(a,b,c)で計算され、aはIDセレクタ、bはクラスセレクタ、属性セレクタ、擬似クラス、cはタイプセレクタおよび擬似要素をカウントします。スコアの早期位置が高ければ、後続の位置に関係なく優先されます。
:is()、:not()、:has()は特定性にどのように影響しますか？

CSSセレクタレベル4によると、:is()、:not()、:has()擬似クラスの特定性は、その引数リスト内で最も特定性の高いセレクタの特定性と等しくなります。たとえば、:is(.foo, #bar)は#bar(1,0,0)の特定性を持ちます。これは、#barが最も特定性の高い引数であるためです。:where()擬似クラスは例外で、常に特定性を0とします。
CSSの特定性が等しい場合、ルールの順序は重要ですか？

はい。2つのセレクタが正確に同じ特定性スコアを持つ場合、CSSのカスケードルールが適用され、ソースコードで後ろに来るルールが優先されます。これが特定性を理解する重要性の理由です。ソース順序に依存するだけだと、ルールの順序が変更されると脆弱なスタイルシートが破壊される可能性があります。
IDセレクタが複数のクラスセレクタを上回る理由は？

特定性アルゴリズムは、左から右へ順にスコアを位置ごとに比較します。IDセレクタは(1,0,0)のスコアを持ち、クラスセレクタの数が増えても、2番目の位置のみを増加させます。位置aが位置bよりも先に比較されるため、単一のIDセレクタは、クラス、属性、擬似クラスセレクタの組み合わせを常に上回ります。