次のHTMLとCSSについて、CSSを適用した場合にliのmarginはどうなるでしょう。
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を付けた上で詳細度で勝たなければ…
まとめ
スタイルの優先順位は、高い順に
!important- インラインスタイル
- 詳細度
- コード順（下から）
うまいことまとめ
はてなブログでは、ユーザーがカスタマイズできるCSSの他にblog.cssが適用されています。blog.cssのスタイルをオーバーライドしたいときは詳細度をうまく使いましょう。
参考
https://www.w3.org/TR/css3-selectors/#specificity
関連記事
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (5件) を見る
