CSS 詳細度計算器
CSSセレクターの詳細度を(a, b, c)で即座に計算。複数セレクターの比較、ID・クラス・要素の内訳を可視化。無料・ブラウザ完結。
使い方
- 入力欄にCSSセレクターを入力します（例:
#nav .item:hover）。 - 詳細度タプル
(a, b, c)と色分けされた内訳が即座に表示されます。 - 複数セレクターを比較するにはカンマで区切ります:
#nav .item, .item:hover。 - 各結果のコピーボタンでタプルをクリップボードにコピーできます。
(a, b, c) タプルの読み方
- a — ID:
#idセレクター1つにつき +1。 - b — クラス / 属性 / 疑似クラス:
.class・[attr]・:疑似クラス1つにつき +1。 - c — 要素 / 疑似要素: タグ名または
::疑似要素1つにつき +1。
左から順に比較します。最初に異なる列が勝敗を決めます。(1,0,0) は常に (0,99,99) に勝ちます。
よくある例
*→(0, 0, 0)p→(0, 0, 1).class→(0, 1, 0)#id→(1, 0, 0)#id .class:hover→(1, 2, 0)div > p + span::before→(0, 0, 4)
FAQ
CSS詳細度とは何ですか？
CSS詳細度とは、同じ要素に複数のルールが適用された場合にどのルールが優先されるかを決定する仕組みです。(a, b, c)の3要素で表し、aはIDセレクター数、bはクラス・属性・疑似クラス数、cは要素型・疑似要素数を表します。
詳細度はどのように計算されますか？
a = IDセレクター数(#id)。b = クラス(.class)・属性([attr])・疑似クラス(:hover)の数。c = 要素型(div, span)・疑似要素(::before)の数。ユニバーサルセレクター(*)とコンビネータ(+, >, ~)は0です。
複数のセレクターを比較するには？
カンマで区切って入力してください。ツールが各詳細度タプルを並べて表示します。左から順に比較し、最初に異なる列の値が大きい方が優先されます。
:not()・:is()・:has()はどう扱われますか？
:not()と:is()は引数の中で最も詳細度の高いセレクターを使用します。:where()は常に0です。:has()は引数の詳細度を使用します。このツールはこれらの疑似クラスを単純化して解析します。
インラインスタイルや!importantは含まれますか？
インラインスタイル(style属性)は(a, b, c)より上位で、!importantはすべてを上書きします。このツールはセレクターの詳細度のみを計算します。