「文法は間違っていないのに、書いたCSSがきちんと反映されないッッ」
ということはCSS使いにはよくあると思う。
なんだか永遠の課題のような感じがするけども、たぶんそうでもない。よ。
3つのルールを知っておけば、CSSについてはOKさ。
もう本当にこれだけ覚えてればいいっす。
たとえば、下のようなCSSをみてみよう。
数を比較してより多いほうが優先順位が高く、比べっこが決まれば他は比較しない
比べる順番は idの数→classの数→要素の数→書かれた順序
div ul.hoge li.hoge p.hoge { /* 1 */ color: black; } div ul.hoge li.hoge p.hoge { /* 2 */ color: red; } p { /* 3 */ color: blue; } div#hoge p { /* 4 */ color: green; }
こんなCSSがあったとき、あてられるCSSの優先順位はどういうふうになっているだろうか。
4 > 2 > 3である。(1は無視される)
上のcssを比べてみると、
styleの数 | idの数 | classの数 | 要素の数 | 書かれた順番 |
0 | 0 | 3 | 4 | 1 |
0 | 0 | 3 | 4 | 2 |
0 | 0 | 0 | 1 | 3 |
0 | 1 | 0 | 2 | 4 |
となっていますね。
表でいうと、左から1つ1つみて数を比較しているわけですね。
1と2を比較すると、id class 要素 全て数は一緒ですが、書かれた順番は2のほうが後なので、1より2のほうが優先されます。
(というか1が日の目を見ることはありません)
で、2と3ですが、idの数はどちらも0です。なのでclassを比較します。
classの数は2が3つなのに対し3は0です。classの数は2のほうが多いので、2のCSSが優先されます。
一度優先順位が決まると、要素の数もCSSの書かれた順番も一切考慮されません。
3と4も、同じ理由ですね。
3のidの数は0 4のidの数は1つです。idの数は4のほうが多いので、CSSは4のほうが優先されます。
classの数や要素の数では3のほうが多くても、idの数は4のほうが多いので一切考慮されません。