cBlog

Tips for you.

「詳細度」CSSの優先順位は書かれた順番だけではない

f:id:cruller:20161115215655j:plain

次のHTMLとCSSについて、CSSを適用した場合にlimarginはどうなるでしょう。

HTML
<div class="itunes-embed">
  <div class="itunes-embed-info">
    <ul>
      <li class="itunes-embed-preview">...</li>
    </ul>
  </div>
</div>
CSS
.itunes-embed .itunes-embed-preview {
  margin: .5em 0;
}
.itunes-embed .itunes-embed-info .itunes-embed-preview {
  margin: .5em 0;
}
.itunes-embed .itunes-embed-info ul li {
  margin: auto;
}

正解は、.5em 0です。

この問題は、当ブログで実際に使ったコードを改変して出題しました。なので、いい例題じゃない。

margin: auto;が後から書かれているのになんで?と思ってくれたなら、この記事を書いた甲斐があります。

 

CSSの優先順位

スタイルの指定が重複したとき、後から書かれたものが優先されるというのは間違いじゃありませんが、それだけでもありません。

スタイルの優先順位には、書かれた順番の他に詳細度(specificity)と重要度(importance)があります。この概念をカスケードといいます。

 

コードの順序

書かれた順番により左右されるのは、関係するインラインスタイル(style="...")がなく、詳細度と重要度が同じ場合です。その場合、後に宣言されたものが前に宣言されたものを上書きします(後に書かれたものが優先される)。

 

詳細度

さて、本題です。

スタイルの宣言は、セレクタの数によって柔道のようなポイントが与えられます。Safariに従い、詳細度を(a, b, c)で表しましょう。a、b、cはそれぞれ、次をカウントしたものです。

  • a:IDセレクタ(#hoge)
  • b:クラスセレクタ(.hoge)、属性セレクタ(a[hoge])、擬似クラス(a:hoge)
  • c:要素型セレクタ(hoge)、擬似要素(a::hoge)

先程の問題で考えてみましょう。詳細度は、上から

  • (0, 2, 0)
  • (0, 3, 0)
  • (0, 2, 2)

です。つまり、bの数が多い2番目の宣言が有効になるわけです。

aが多い方が優先され、同数ならbが多い方、bも同数なら…という感じです。注意してほしいのは、柔道と違い、いくらbやcの数を稼いでも繰り上がりはないということです。

ちなみに、インラインスタイルはあらゆる詳細度よりも優先されます。

 

重要度

!importantが付いているかどうかです。おわり。

 

補遺

  • インラインスタイルを上書きできるのは!importantだけ
  • !important宣言を上書きするには!importantを付けた上で詳細度で勝たなければ…

 

まとめ

スタイルの優先順位は、高い順に

  1. !important
  2. インラインスタイル
  3. 詳細度
  4. コード順(下から)

 

うまいことまとめ

はてなブログでは、ユーザーがカスタマイズできるCSSの他にblog.cssが適用されています。blog.cssのスタイルをオーバーライドしたいときは詳細度をうまく使いましょう。

 

参考

https://www.w3.org/TR/css3-selectors/#specificity

postd.cc

 

関連記事

yaritakunai.hatenablog.com

yaritakunai.hatenablog.com

yaritakunai.hatenablog.com

 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)