CSSセレクタの詳細度を確認できるWebサービス「Specificity Calculator」

CSSセレクタの詳細度を確認できるWebサービス「Specificity Calculator」

CSSセレクタの詳細度を確認できるWebサービス「Specificity Calculator」

Specificity Calculatorは、CSSセレクタの詳細度を確認できるWebサービスです。

CSSでは、セレクタの詳細度が高い方を優先して適用する仕組みになっています。例えば、「.content」よりも「p.content」の方が詳細度は高いので、.contentの方が後で書かれていたとしても、p.contentのスタイルが優先して適用されます。以下の場合、フォントサイズは20pxになります。

p.content {
  font-size: 20px;
}

.content {
  font-size: 16px;
}

CSSで新たにセレクタを追加して上書きした時に、別セレクタのスタイルが適用されたままの場合は、この詳細度が関係している可能性が高いです。

Specificity Calculatorは、そんなCSSセレクタの詳細度を計算してくれるWebサービスです。

Specificity Calculatorの使い方

Specificity Calculatorにアクセスすると、セレクタの入力欄が表示されるので、そこに詳細度を確認したいセレクタを入力します。

CSSセレクタの入力

詳細度は、「IDs」「Classes, attributes and pseudo-classes」「Elements and pseudo-elements」の3つの指標で計算されます。スコアが高い程、優先して適用されます。

IDs ID
Classes, attributes and pseudo-classes クラス・属性・擬似クラス
Elements and pseudo-elements HTMLエレメント・疑似要素

[+Duplicate]ボタンをクリックするとセレクタの入力欄を増やせて、右上の[Sort specificity]をクリックすると詳細度の高い順に並べ替えられます。

セレクタの追加と並べ替え

あとがき

セレクタの詳細度が高い順に並べ替えられるのは便利ですね。追加したスタイルがうまく適用されない時は、Specificity Calculatorを使って詳細度を確認してみましょう。

ちなみに、!importantがプロパティの値に付いていると、詳細度のルールをすっ飛ばして最優先されるので、スタイルの上書きがうまくいかない場合は!importantが邪魔していないかも併せてチェックした方が良いです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です