Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

52,051 views

Published on

Cssのセレクタ要素に点数つけて優先順位きめるお話。specificityの。

256個の.classを並べると#idを上書きの件について調べてみました。
http://tech.uni-q.net/design/2012/08/17/class/

Published in: Design

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

  1. 1. ご存知、ないのですか? CSS の優先順位 Yumi Ishizaki 20120821
  2. 2. CSSの優先順位の基本 Html内のCSS>ユーザーCSS>ブラウザ標準style Body内Style=“” >head内に直接css>外部css 最後に記述した方が優先的に表示される !important が優先される  あくまで裏ワザ! とっても困った時に使おう!  使いすぎると、どこで!important宣言したか分からな くなって「!important探しの旅」に出ないといけない。 めんどくさい。  あと、重くなる気がする
  3. 3. まだあった優先順位IDやclassを組み合わせたセレクタ文字列 ↓その「セレクタ文字列」の塊に点数をつけて 多い方が優先されちゃう!
  4. 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. 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. 6. 文字列セレクタに 点数みたいなの付ける 個数を連結し セレクタ文字列 て、バージョ それぞれ何個あ をタイプ別に仕 るか数える ン表記のよう 分 なものをつく る B-typeセレクタが1個、 0.1.14.0これはB-typeセレクタ、 C-typeセレクタが14個… バージョン表記/日付表記これはC-typeセレクタ… っぽいのをイメージ… 「14」はイチヨンではなく ジュウヨンと読む
  7. 7. セレクタ文字列の仕分 A→ Style=“” (css3では無くなってる) B→ id  #hogeとか C→ class、属性セレクタ、擬似クラス  .class  [title=“”]など(属性セレクタ)  :hover など(擬似クラス) D→ 要素、擬似要素  Htmlタグ  :first-line、:after など(擬似要素)
  8. 8. 旧:セレクタ文字列に点数 ×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 高い
  9. 9. 改:セレクタ文字列に点数 小数点じゃなくて バージョン表記/日付表記っぽいのを イメージしてセレクタ文字列 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 高い
  10. 10. 注意! ブラウザによって違うこともあるかも  対応してない要素があるので… 基本的に A(style=“”)>B(#idなど)>C(.classなど)>D  .classが10個以上あっても#idには勝てない!  ブラウザによって256個以上あると勝てちゃったりす るようです 例えば「0.1.14.0」の場合は、 「いち点いちよん」じゃなくて 「いち点じゅうよん」って読むと分かりやすいかも
  11. 11. おわりスマートでメンテしやすいCSSを書いて モテモテに!

×