CSSの優先度:クラスはプラス10点,IDはプラス100点

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;}

“かきくけこ”の文字の色は青になるはず。

結果:

かきくけこ

やっぱり赤になる・・・。何か間違ってるのだろうか・・・。

コメント

タイトルとURLをコピーしました