CSS詳細度計算ツール
CSSセレクタの詳細度を分析・比較します。
CSSセレクターの詳細度をID、クラス・属性・疑似クラス、要素・疑似要素の3値で概算し、2つのセレクターを比較します。
CSS specificityを計算する方法
- セレクターを1つ入力して詳細度タプルを計算します。
- または比較モードでセレクターAとBを入力します。
- 左の値から順に比較して強い方を確認します。
計算方法と注意点
完全なCSSパーサーではなく、ID、クラス/属性/疑似クラス、要素/疑似要素を数える簡易実装です。
`:where()`は0として除外しますが、`:not()`、`:is()`、`:has()`は中身を展開して数えるため、最大詳細度の引数だけを採用するCSS仕様と複雑なケースで異なることがあります。
プライバシーと制限
解析はすべてブラウザ内で行われます。一般的なセレクターの比較用であり、最新CSSセレクターの全エッジケースを扱う正式なパーサーではありません。
CSS specificity FAQ
(1,2,3)は何を意味しますか？
IDが1、クラス系が2、要素系が3という意味です。
:where()は加算されますか？
このツールでは0です。
:is()、:not()、:has()は完全に仕様通りですか？
いいえ。簡易実装のため複雑なselector listは過大に数えることがあります。
ソース順も比較しますか？
いいえ。詳細度だけで、cascade順や!importantは扱いません。
スタイルシート全体を読みますか？
いいえ。入力したセレクターだけを解析します。