どのCSSルールが勝つか調べる

やりたいこと

同じ要素に効きうるルールが2つある時、ブラウザは詳細度の高いセレクタを選びます。同点ならソースの後ろが勝ちます。詳細度は(ID数, クラス相当数, 型数)のタプルで、左から比較します。この計算機はセレクタをそのタプルに変換するので、スタイルを切り替えて試す前に勝者が分かります。

セレクタの採点

セレクタを貼ります。カンマ区切りでも1行に1つでも構いません。それぞれにa,b,cのスコアが付きます。aはID数、bはクラス・属性セレクタ・擬似クラス、cは要素型と擬似要素です。強い順に並びます。

• `.nav .link` → (0,2,0)、`#nav .link` → (1,1,0)。IDを含む方が、ファイル内で先に書かれていても勝ちます。
• :is()・:not()・:has()は最も強い引数のスコアを取り、:where()と*は0です。
• インラインstyleと!importantはセレクタより上なので採点対象外です。

具体例

上書きのつもりの`.card button { color: red }`が`.theme .card button { color: blue }`に負けている。スコアは(0,1,1)対(0,2,1)。後者はクラスが1つ多いので勝ちます。ファイルの後ろに書くだけでは足りず、同等以上のセレクタが必要です。

対応範囲

採点するのはセレクタの文字列で、あなたのスタイルシートのカスケードではありません。同点の2つでどちらが後から適用されるかはファイル順依存なので分かりません。1回に50セレクタまで。