1年ぐらい前まで知らなかったのですが、CSSにはクラスで指定するかIDで指定するかによって優先順位が違うようです。
CSSの優先順位~CSSテクニック~
どうやら、クラスではプラス10点、IDではプラス100点で、点数の高い方が優先されるらしい。ということはつまり、クラスが11個、IDが1個指定してあって、11個分のクラスと1個のIDでCSSを指定すると、11個分のクラスで指定した方が優先されるのか。と思って試してみた。
HTML
<div class="a b c d e f g h i j k l" id="id">あいうえお</div>
CSS
.a.b.c.d.e.f.g.h.i.j.k.l{ color:blue;} #id{color:red;}
“あいうえお”の文字の色は青になるはず。
結果:
あいうえお
何で赤なんだよ!
いや待て。そういえばどこかでこの数値は16進数と聞いたことがあるぞ。あということは、クラスが17個だったらそっちが優先されるはず。
HTML
<div class="a b c d e f g h i j k l m n o p q" id="id2">かきくけこ</div>
CSS
.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p.q{ color:blue;} #id2{color:red;}
“かきくけこ”の文字の色は青になるはず。
結果:
かきくけこ
やっぱり赤になる・・・。何か間違ってるのだろうか・・・。
コメント