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に関するノウハウ書いているのでよかったら参考にしてみてください