Edited at

CSSセレクタの優先順位の計算方法


はじめに


  • セレクタには優先順位があり、点数計算して高得点のものが適用される

  • 点数計算のやり方を以下に記述する


計算式


  • 以下の点数を加算していく

指定方法

点数

タグのstyle属性
style="color: red;"
1000点

ID
#hoge
100点

クラス
.hoge
10点

属性セレクタ
a[href*="google"]
10点

要素名
ul
1点

擬似要素
:first-child
1点

ユニバーサルセレクタ
*
0点


計算例


計算
合計点

style=""
1000(style属性)
1000点

#hoge
100(ID属性)
100点

li.color.label
1(要素名) + 10(クラス属性) + 10(クラス属性)
21点

table tr td.color
1(要素名) + 1(要素名) + 1(要素名) + 10(クラス属性)
13点

div + *[href$="com"]
1(要素名) + 0(ユニバーサルセレクタ) + 10(属性セレクタ)
11点

h1 div + span
1(要素名) + 1(要素名) + 1(要素名)
3点

li:last-child
1(要素名) + 1(擬似要素)
2点


~ただの宣伝~


  • 全国のSeleniumer必読

  • Seleniumerといっていますが、Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください