Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
195
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Organization

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に関するノウハウ書いているのでよかったら参考にしてみてください
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
195
Help us understand the problem. What are the problem?