Cssのセレクタ要素に点数つけて優先順位きめるお話。specificityの。 256個の.classを並べると#idを上書きの件について調べてみました。 http://tech.uni-q.net/design/2012/08/17/class/

1. ご存知、ないのですか？
CSS の優先順位
Yumi Ishizaki
20120821

2. CSSの優先順位の基本
 Html内のCSS＞ユーザーCSS＞ブラウザ標準style
 Body内Style=“” ＞head内に直接css＞外部css
 最後に記述した方が優先的に表示される
 !important が優先される
 あくまで裏ワザ！
とっても困った時に使おう！
 使いすぎると、どこで!important宣言したか分からな
くなって「!important探しの旅」に出ないといけない。
めんどくさい。
 あと、重くなる気がする

3. まだあった優先順位
IDやclassを組み合わせたセレクタ文字列
↓
その「セレクタ文字列」の塊に点数をつけて
多い方が優先されちゃう！

4. 例：sampleは何色？
html css
<div id="blue">
<p class=”nice red text"> 0.0.0.1
p {color:green;} /*？点*/
sample #blue p {color:blue;} /*？点*/
0.1.0.1
</p> p.nice.red.text {color:red;} /*？点*/
0.0.3.1
</div>​
sample
点数が多い「セレクタ文字列」が
表示されるよ！

5. 仕様
 W3Cを「css specificity」でググれば出てくる
かと！
 Css3 :http://www.w3.org/TR/2011/REC-css3-
selectors-20110929/#specificity
 Css2：
http://www.w3.org/TR/CSS21/cascade.html#
specificity
 CSS3とCSS2の違いは、「Style=“”」があるか無
いかの差だけっぽい

6. 文字列セレクタに
点数みたいなの付ける
個数を連結し
セレクタ文字列 て、バージョ
それぞれ何個あ
をタイプ別に仕
るか数える
ン表記のよう
分 なものをつく
る
B-typeセレクタが1個、
0.1.14.0
これはB-typeセレクタ、 C-typeセレクタが14個… バージョン表記/日付表記
これはC-typeセレクタ… っぽいのをイメージ…
「14」はイチヨンではなく
ジュウヨンと読む

7. セレクタ文字列の仕分
 A→ Style=“”
（css3では無くなってる）
 B→ id
 #hogeとか
 C→ class、属性セレクタ、擬似クラス
 .class
 [title=“”]など（属性セレクタ）
 :hover など（擬似クラス）
 D→ 要素、擬似要素
 Htmlタグ
 :first-line、:after など（擬似要素）

8. 旧：セレクタ文字列に点数
×1000 ×100 ×10 ×1
セレクタ文字列 A B C D 合計点 優先度
低い
* 0 0 0 0 0
li 良くない説明だった
0 0 0 1 1
li:first-line 0 (´・ω・`)
0 0 2 2
ul li 0 0 0 2 2
ul ol+li 0 0 0 3 3
h1 + *[rel=up] 0 0 1 1 11
ul ol li.red 0 0 1 3 13
li.red.level 0 0 2 1 21
#x34y 0 1 0 0 100 優先度
Style=“” 1 0 0 0 1000 高い

9. 改：セレクタ文字列に点数
小数点じゃなくて
バージョン表記/日付表記っぽいのを
イメージして
セレクタ文字列 A B C D 点数 優先度
低い
* 0 0 0 0 0.0.0.0
li 0 0 0 1 0.0.0.1
li:first-line 0 0 0 2 0.0.0.2
ul li 0 0 0 2 0.0.0.2
ul ol+li 0 0 0 3 0.0.0.3
h1 + *[rel=up] 0 0 1 1 0.0.1.1
ul ol li.red 0 0 1 3 0.0.1.3
li.red.level 0 0 2 1 0.0.2.1
#x34y 0 1 0 0 0.1.0.0 優先度
Style=“” 1 0 0 0 1.0.0.0 高い

10. 注意！
 ブラウザによって違うこともあるかも
 対応してない要素があるので…
 基本的に
A(style=“”)＞B(#idなど)＞C(.classなど)＞D
 .classが10個以上あっても#idには勝てない！
 ブラウザによって256個以上あると勝てちゃったりす
るようです
 例えば「0.1.14.0」の場合は、
「いち点いちよん」じゃなくて
「いち点じゅうよん」って読むと分かりやすいかも

11. おわり
スマートでメンテしやすいCSSを書いて
モテモテに！