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

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

CSSセレクタの詳細度を確認できるWebサービス「Specificity Calculator」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 24時間注文・入稿受付OK。実績と信頼の「印刷の通販 グラフィック」
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。