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

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

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

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

例：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 点数が多い「セレクタ文字列」が表示されるよ！

仕様 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セレクタが1個、 0.1.14.0これはB-typeセレクタ、 C-typeセレクタが14個… バージョン表記/日付表記これはC-typeセレクタ… っぽいのをイメージ… 「14」はイチヨンではなくジュウヨンと読む

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

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

改：セレクタ文字列に点数小数点じゃなくてバージョン表記/日付表記っぽいのをイメージしてセレクタ文字列 A B C D 点数優先度低い* 0 0 0 0 0.0.0.0li 0 0 0 1 0.0.0.1li:first-line 0 0 0 2 0.0.0.2ul li 0 0 0 2 0.0.0.2ul ol+li 0 0 0 3 0.0.0.3h1 + *[rel=up] 0 0 1 1 0.0.1.1ul ol li.red 0 0 1 3 0.0.1.3li.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を書いてモテモテに！

http://w3q.jp	5665
http://uniq.heteml.jp	922
http://bikkuri.me	241
http://localhost	46
http://ss.dotbranch.com	30
http://us-w1.rockmelt.com	11
http://tech.uni-q.net	8
https://twitter.com	8
http://hatebutv.com	3
http://b.hatena.ne.jp	3
http://15parfait.tumblr.com	2
http://tweetedtimes.com	2
http://purecrest.blogspot.jp	1
http://twitter.com	1
http://wiki.onakasuita.org	1
http://relaunch.prosiebensat1digital.de	1
http://webcache.googleusercontent.com	1

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

by Yumi Ishizaki on Aug 08, 2012

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 6,946

Statistics