CSS詳細度計算ツール

使い方

1. セレクターに、スタイルシートに書くとおりのセレクターを入力します。
2. 2つ目のセレクター（任意）に別のセレクターを入力すると、2つを比べられます。空のままでも構いません。
3. 1つ目のセレクターの詳細度（a, b, c）を読みます。2つ入力した場合は、優先されるルールも確認します。
4. 数えた部分の表で、各セレクターのどの部分がどの数字になったかを確かめます。

3つの数字の数え方

Selectors Level 3勧告（英語）は、セレクターを3つの列で数えると定めています。このツールは、数字を左から順に比べます。最初にa、次にb、最後にcです。全称セレクターの*と、>や+のようなコンビネーターは数えません。

• aはIDセレクターの数です。例：#nav。
• bはクラスセレクター（例：.active）、属性セレクター（例：[href]）、疑似クラス（例：:hover）の数です。
• cは要素セレクター（例：liやa）と、疑似要素（例：::before）の数です。

引数をもつ疑似クラス

:is()、:not()、:has()は、その引数のうちで最も詳細度の高いセレクターとして数えられます。そのため、:is(#a, .b)は(1, 0, 0)です。:where()は何も数えません。:nth-child()は、疑似クラス1つと、「of S」のリストの中で最も詳細度の高いセレクターとして数えられます。そのため、:nth-child(even of li, .item)は(0, 2, 0)です。これらの規則はSelectors Level 4の草案（英語）によるもので、草案は編集中の版であり、変わることがあります。

このツールがしないこと

• ::part(x)のように引数をもつ疑似要素は、疑似要素1つとして数えます。引数は読みません。
• &によるネスティングは読みません。また、1つのボックスに1つのセレクターを入力する仕様のため、カンマで区切られたリストは扱いません。
• スタイルシートは見えないため、詳細度が同じときは後のルールが優先すると表示し、順序の判断は利用者に任せます。

よくある質問