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

  • 72
    いいね
  • 4
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

  • セレクタには優先順位があり、点数計算して高得点のものが適用される
  • 点数計算のやり方を以下に記述する

計算式

  • 以下の点数を加算していく
指定方法 点数
タグのstyle属性 style="" 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(要素名) + 10(クラス属性) 3点
li:last-child 1(要素名) + 1(擬似要素) 2点

~ただの宣伝~

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