CSSセレクターの特異性スコアを計算する方法

CSSセレクターの特異性を調べる

CSSセレクターの特異性は、複数のスタイル指定が競合したときに、どの指定が優先されやすいかを比較する手がかりです。このツールでは、入力したセレクターから4つの構成要素と数値スコアを確認できます。スタイルシートの優先関係を調べたいときや、セレクターを見直すときに利用できます。

使い方と確認手順

1. 調べたいCSSセレクターを入力欄に貼り付けます。入力は省略でき、空欄や空白だけの状態でも結果が返ります。
2. 計算を実行し、表示された4つの構成要素、数値スコア、セレクター表記を確認します。
3. IDに該当するトークンは第1要素、クラスに該当するトークンは第2要素に加算されます。属性セレクターと擬似クラスも第2要素、擬似要素と検出された要素・型セレクターは第3要素に加算されます。
4. 複数の要素を比較するときは、構成要素を順に確認してから数値スコアを見ます。スコアは4要素にそれぞれ1000、100、10、1の重みを掛けて算出されます。全称セレクターは加算対象になりません。

結果の読み方

構成要素の数値が大きいほど、計算上のスコアも大きくなります。まずID、クラス・属性・擬似クラス、擬似要素・要素や型に分けて内訳を確認すると、セレクター同士の差を把握しやすくなります。空欄または空白だけを送った場合は、4つの要素がすべて0、スコアが0、セレクター表記が空になります。入力したセレクターが空白以外を含む場合、結果のセレクター表記には送信した文字列が保持されます。

使用例

スタイル指定「#header」の特異性を確認するため、入力欄に「#header」を貼り付けて計算します。

IDセレクター「#header」を入力して計算を実行し、構成要素とスコアを確認します。

構成要素が[1, 0, 0, 0]、数値スコアが1000、セレクター表記が入力したIDセレクターになります。

制限事項

• 判定は検出されたトークンやパターンに基づきます。特殊な構文を含むセレクターでは、意図した扱いになるか結果の内訳を確認してください。

よくある間違い

• 入力欄にセレクターを貼り付けたつもりでも空白だけになっていると、4つの要素とスコアは0になります。送信前に、調べたい文字列が空白以外も含んでいるか確認してください。

よくある質問

セレクターを入力しなくても結果は表示されますか？

空欄または空白だけを送信した場合は、4つの構成要素が0、スコアが0、セレクター表記が空になります。

IDセレクターはどの要素に加算されますか？

IDに該当するトークンは第1要素に加算されます。IDだけの例では構成要素が[1, 0, 0, 0]になります。

全称セレクターやクラスはスコアに反映されますか？

全称セレクターは加算されません。クラス、属性セレクター、擬似クラスなどは第2要素として扱われます。