ツールを実行
このツールは、入力されたCSSセレクタテキストを解析し、その詳細度（Specificity）を4つのコンポーネントと単一の数値スコアに変換します。IDセレクタ、クラスセレクタ、属性セレクタ、擬似クラス、要素セレクタ、および擬似要素の出現回数をカウントし、重み付けされた合計スコアを算出します。ユニバーサルセレクタはカウントされません。空白またはスペースのみの入力は、すべてのコンポーネントがゼロの結果を返します。非空白の入力では、入力されたセレクタテキストが結果に表示されます。開発者はこの計算結果を用いて、スタイルシートの競合を予測し、意図したデザインが正しく適用されるようセレクタの優先順位を調整できます。複雑な複合セレクタや、ID、クラス、要素が混在するパターンでも、各部分の貢献度を視覚的に確認可能です。
使い方
- 「Selector」フィールドに、詳細度を計算したいCSSセレクタを入力します。
- 必要に応じて、複数のクラスやIDを含む複合セレクタを入力できます。
- 「Run」ボタンをクリックして計算を実行します。
- 結果パネルに表示される4つの詳細度の各要素の値と数値スコアを確認します。
- スコアの高いセレクタがブラウザで優先的に適用されることを理解し、スタイルの競合を解決するために使用します。
使用例
- #header .nav li a:hover
- .container > div.content p.intro
よくある質問
ユニバーサルセレクタ（*）は詳細度に影響しますか？
いいえ、このツールの実装ではユニバーサルセレクタはカウントされず、詳細度のスコアに寄与しません。
空白を入力するとどうなりますか？
空白またはスペースのみの入力の場合、4つの詳細度コンポーネントはすべてゼロになり、スコアも0と表示されます。
数値スコアはどのように計算されますか？
4つのコンポーネントはそれぞれ1000、100、10、1の重みで掛けられ、それらの合計が数値スコアとして表示されます。
擬似要素と擬似クラスの違いは何ですか？
擬似クラスは2番目のコンポーネントに、擬似要素は3番目のコンポーネントにカウントされます。これにより、スタイルの優先順位が正確に反映されます。