by shigemk2

当面は技術的なことしか書かない

CSSが当てられる優先順位について知っておきたい3つのこと

「文法は間違っていないのに、書いたCSSがきちんと反映されないッッ」
ということはCSS使いにはよくあると思う。

なんだか永遠の課題のような感じがするけども、たぶんそうでもない。よ。
3つのルールを知っておけば、CSSについてはOKさ。

  • 数を比較してより多いほうが優先順位が高く、比べっこが決まれば他は比較しない
  • 比べる順番は idの数→classの数→要素の数→書かれた順序
  • セレクタソースコードではなく開発者ツールから見るべし

もう本当にこれだけ覚えてればいいっす。
たとえば、下のような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のほうが多いので一切考慮されません。

セレクタソースコードではなく開発者ツールから見るべし

ソースコードセレクタを見るのはもうしんどいので、
開発者ツールからCSSセレクタの数を知ることが出来ます。

Assigning property values, Cascading, and Inheritance