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

上記の2つの例を比較した場合、後者の方がCSSセレクタが長くて、優先度が高いようにも見えます。けれど、点数で言えば前者が「0.2.1.1」で、後者が「0.1.5.1」となります。 これらの点数を比較すると、前者の方が優先度が高いということになります。アプリのバージョン情報を比較する要領で比べればわかりやすいかと思います。 上記の例では、「ID」と、「クラス」、「要素」のみで計算したので、まだわかりやすいとは思います。しかし、これに「属性セレクタ」、「疑似クラス」、「擬似要素」が加わってくるともうややこしくて、途端に計算が面倒になります。 こういった、面倒な計算を一切排除して、優先度の点数を簡単に判別できるのが以下で紹介するSpecificity Calculatorです。 Specificity Calculatorとは Specificity Calculatorは、CSSセレクタを入力

[moegg]

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