CSSセレクタの優先度の計算は、正直面倒くさいです。
簡単なものの場合は「このCSSセレクタは、IDとクラスと要素で指定してあるから0.1.1.1だな」みたいな感じで、ある程度計算することはできます。
ただ、CSSセレクタにもいろいろあって、擬似クラスとか擬似要素とかもあわせて複雑に絡み合うと、点数計算が面倒くさいので、かなりのどんぶり勘定になってしまいます。
そんな、CSSセレクタの優先度ですが、コピペするだけで、手軽に計算や点数比較、点数による並び替えまでできるSpecificity CalculatorというWEBツールが便利だったので紹介です。
image by Geir Arne Brevik
目次
CSSセレクタの優先度とは
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」という点数になります。
#body #main .entry a{ ... }
以下のようなCSSセレクタだと「ID×1、クラス×5、要素×1」で点数は「0.1.5.1」になります。
#main .entry.post-34440.post.type-post .entry-card-content a{ ... }
上記の2つの例を比較した場合、後者の方がCSSセレクタが長くて、優先度が高いようにも見えます。けれど、点数で言えば前者が「0.2.1.1」で、後者が「0.1.5.1」となります。
これらの点数を比較すると、前者の方が優先度が高いということになります。アプリのバージョン情報を比較する要領で比べればわかりやすいかと思います。
上記の例では、「ID」と、「クラス」、「要素」のみで計算したので、まだわかりやすいとは思います。しかし、これに「属性セレクタ」、「疑似クラス」、「擬似要素」が加わってくるともうややこしくて、途端に計算が面倒になります。
こういった、面倒な計算を一切排除して、優先度の点数を簡単に判別できるのが以下で紹介するSpecificity Calculatorです。
Specificity Calculatorとは
Specificity Calculatorは、CSSセレクタを入力欄に貼り付けるだけで、ややこしい優先度の点数計算を行ってくれるWEB制作補助ツールです。
入力欄は何個までも増やすことができるので、いくつかCSSセレクタを入力して比較したり、点数が高い順に並び替えしたりすることもできます。
Specificity Calculatorを使ってみる
このツールの使い方はとても簡単です。
例えば、ChromeのデベロッパーツールなどでCSSセレクタをコピーして取得します。
あとは、Specificity Calculatorの入力欄に、CSSセレクターを書き込む(ペースト)するだけで優先度の計算が簡単に行えます。
「.entry h2 a」の場合は「0.0.1.2」となりましたが、それぞれの点数ごとに色分けもされて「どれが何点なのか?」がとてもわかりやすいです。
こんな滅茶苦茶長い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」の比較なんですが、ツールに貼り付けるだけで、以下のように簡単に比較することができます。
大きな文字で、色分け表示されるので、どちらの優先度が高いのか一目瞭然です。
優先度順に並び替える
また、画面の左側にある「並び替えボタン(Sort by specificity)」をクリックすると、
優先度が高い順に並び替えてくれます。
上から優先度の高い順です。
例えばWordpressのプラグインのスタイルを変更したいときなどは、プラグインで書かれているものより優先度の高いCSSセレクタを子テーマなどのstyle.cssに書けば、優先度の高い方のスタイルで上書きされます。
まとめ
Specificity Calculatorは、こんな感じで、優先度の「計算」、「比較」、「並べ替え」が簡単に行えます。
このツールを活用すれば、面倒な優先度計算もかなり楽になるのではないかと思います。
というわけで、「WordpressプラグインのCSSを、テーマ側のstyle.cssからimportantを使用せず高い優先度で上書きしたい」なんて時や、「優先度計算をするのが面倒だけどCSS設計はなるべくちゃんとやりたい」なんて時には便利かと思います。