ご存知、ないのですか？CSS の優先順位

Yumi Ishizaki

20120821

CSSの優先順位の基本 Html 内の CSS ＞ユーザー CSS ＞ブラウザ標準 style

Body 内 Style=“” ＞ head 内に直接 css ＞外部 css

最後に記述した方が優先的に表示される

!important が優先される あくまで裏ワザ！

とっても困った時に使おう！ 使いすぎると、どこで !important 宣言したか分から

なくなって「 !important 探しの旅」に出ないといけない。めんどくさい。

あと、重くなる気がする

まだあった優先順位ID や class を組み合わせたセレクタ文字列

↓

その「セレクタ文字列」の塊に点数をつけて多い方が優先されちゃう！

点数が多い「セレクタ文字列」が表示されるよ！sample

例： sampleは何色？

<div id="blue"> <p class=”nice red text"> sample </p></div>

p {color:green;} /* ？点 */#blue p {color:blue;} /* ？点 */p.nice.red.text {color:red;} /* ？点*/

html css

0.0.0.1 0.1.0.

1 0.0.3.1

仕様 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=“” 」があるか無いかの差だけっぽい

文字列セレクタに点数みたいなの付ける

セレクタ文字列をタイプ別に仕分

それぞれ何個あるか数える

個数を連結して、バージョン表記のようなものをつく

る

これは B-type セレクタ、これは C-type セレクタ…

B-type セレクタが 1 個、C-type セレクタが 14 個… 0.1.14.0

バージョン表記 / 日付表記っぽいのをイメージ…「 14 」はイチヨンではなくジュウヨンと読む

セレクタ文字列の仕分 A→ Style=“”

（ css3 では無くなってる）

B→ id #hoge とか

C→ class 、属性セレクタ、擬似クラス .class [title=“”] など（属性セレクタ） :hover など（擬似クラス）

D→ 要素、擬似要素 Html タグ :first-line 、 :after など（擬似要素）

旧：セレクタ文字列に点数

セレクタ文字列 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

×1000

×100 ×10 ×1

優先度高い

優先度低い

良くない説明だった(´ ・ ω ・ `)

改：セレクタ文字列に点数

セレクタ文字列 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優先度高い

優先度低い

小数点じゃなくてバージョン表記 / 日付表記っぽいのを

イメージして

注意！ ブラウザによって違うこともあるかも

対応してない要素があるので…

基本的にA(style=“”) ＞ B(#id など ) ＞ C(.class など ) ＞ D .class が 10 個以上あっても #id には勝てない！ ブラウザによって 256 個以上あると勝てちゃったり

するようです

例えば「 0.1.14.0 」の場合は、「いち点いちよん」じゃなくて「いち点じゅうよん」って読むと分かりやすいかも

おわりスマートでメンテしやすい CSS を書いて

モテモテに！