CSSセレクタの優先度を手軽に計算して比較できるツール「Specificity Calculator」

CSSセレクタの優先度の計算は、正直面倒くさいです。

簡単なものの場合は「このCSSセレクタは、IDとクラスと要素で指定してあるから0.1.1.1だな」みたいな感じで、ある程度計算することはできます。

ただ、CSSセレクタにもいろいろあって、擬似クラスとか擬似要素とかもあわせて複雑に絡み合うと、点数計算が面倒くさいので、かなりのどんぶり勘定になってしまいます。

そんな、CSSセレクタの優先度ですが、コピペするだけで、手軽に計算や点数比較、点数による並び替えまでできるSpecificity CalculatorというWEBツールが便利だったので紹介です。

image by Geir Arne Brevik

スポンサーリンク
レクタングル(大)広告

CSSセレクタの優先度とは

black-and-white-sport-fight-boxer

CSSセレクタの優先度の点数計算というのは、結構ややこしくて、以下のように「バージョン表記形式で、変数が決められます。

指定方法 点数
style属性 style="" 1.0.0.0
ID #main 0.1.0.0
クラス .entry 0.0.1.0
属性セレクタ [href*="google"] 0.0.1.0
疑似クラス :hover 0.0.1.0
要素名 h1 0.0.0.1
擬似要素 :first-line 0.0.0.1
全称セレクタ * 0.0.0.0

詳しくは、ご存知、ないのですか?CSSの優先順位が参考になります。

優先度の点数計算の例

例えば、以下のようなCSSセレクタがあったら、「ID×2、クラス×1、要素×1」で「0.2.1.1」という点数になります。

以下のようなCSSセレクタだと「ID×1、クラス×5、要素×1」で点数は「0.1.5.1」になります。

上記の2つの例を比較した場合、後者の方がCSSセレクタが長くて、優先度が高いようにも見えます。けれど、点数で言えば前者が「0.2.1.1」で、後者が「0.1.5.1」となります。

これらの点数を比較すると、前者の方が優先度が高いということになります。アプリのバージョン情報を比較する要領で比べればわかりやすいかと思います。

上記の例では、「ID」と、「クラス」、「要素」のみで計算したので、まだわかりやすいとは思います。しかし、これに「属性セレクタ」、「疑似クラス」、「擬似要素」が加わってくるともうややこしくて、途端に計算が面倒になります。

こういった、面倒な計算を一切排除して、優先度の点数を簡単に判別できるのが以下で紹介するSpecificity Calculatorです。

Specificity Calculatorとは

Specificity Calculator

Specificity Calculatorは、CSSセレクタを入力欄に貼り付けるだけで、ややこしい優先度の点数計算を行ってくれるWEB制作補助ツールです。

入力欄は何個までも増やすことができるので、いくつかCSSセレクタを入力して比較したり、点数が高い順に並び替えしたりすることもできます。

Specificity Calculatorを使ってみる

このツールの使い方はても簡単です。

例えば、ChromeのデベロッパーツールなどでCSSセレクタをコピーして取得します。

デベロッパーツールなどでCSSセレクタを取得

あとは、Specificity Calculatorの入力欄に、CSSセレクターを書き込む(ペースト)するだけで優先度の計算が簡単に行えます。

Specificity CalculatorにCSSセレクタを貼り付ける

「.entry h2 a」の場合は「0.0.1.2」となりましたが、それぞれの点数ごとに色分けもされて「どれが何点なのか?」がとてもわかりやすいです。

こんな滅茶苦茶長いCSSセレクタの点数計算も一瞬で終わります。

長いCSSセレクタの

html body.archive.category.category-news.category-3.logged-in.admin-bar.customize-support div#container div#body div#body-in div#main div#list div#post-34440.entry.cf.entry-card.post-34440.post.type-post.status-publish.format-standard.has-post-thumbnail.category-news div.entry-card-content h2 a.entry-title.entry-title-link

優先度を比較する

また先程上の方でも書いた「#body #main .entry a」と「#main .entry.post-34440.post.type-post .entry-card-content a」の比較なんですが、ツールに貼り付けるだけで、以下のように簡単に比較することができます。

CSSセレクタの比較

大きな文字で、色分け表示されるので、どちらの優先度が高いのか一目瞭然です。

優先度順に並び替える

また、画面の左側にある「並び替えボタン(Sort by specificity)」をクリックすると、

計算並び替えボタンを押す

優先度が高い順に並び替えてくれます。

点数順に並び替えた後

上から優先度の高い順です。

例えばWordpressのプラグインのスタイルを変更したいときなどは、プラグインで書かれているものより優先度の高いCSSセレクタを子テーマなどのstyle.cssに書けば、優先度の高い方のスタイルで上書きされます。

まとめ

Specificity Calculatorは、こんな感じで、優先度の「計算」、「比較」、「並べ替え」が簡単に行えます。

このツールを活用すれば、面倒な優先度計算もかなり楽になるのではないかと思います。

というわけで、「WordpressプラグインのCSSを、テーマ側のstyle.cssからimportantを使用せず高い優先度で上書きしたい」なんて時や、「優先度計算をするのが面倒だけどCSS設計はなるべくちゃんとやりたい」なんて時には便利かと思います。