CSS Radar

CSS セレクター - もし宣言が重複したら？

セレクターとは？

CSSセレクターとはHTML文書中、どのタグにスタイルを宣言するかを確定させるための仕様。
この仕様をしっかりと理解しないと、IDやクラスだらけで、セマンティックとはほど遠いマークアップを書かなければならなくなり、同時にCSSも無駄にセレクターが並んでしまって、可搬性や可読性に欠けるCSSとなってしまう。

今回はそのセレクターの仕様の内、もし宣言が重複したら、どの宣言が優先されるのかを判断する方法を紹介しよう。

CSS宣言の優先順位づけ

CSSの宣言はまず、

1. タグ内にstyle=”"
2. head内にstyle
3. linkで外部呼び出し

上から順に優先順位が高い。

つまり、style.cssというファイルで仮に
h2 { color: red; }
として、
style
h2 { color: blue; }
/style
と宣言し、さらに
h2 style=”color: black;”
とすると、このh2のフォントカラーは黒になる。

では、本題のCSSセレクターの計算式

#ID = 100
.class = 10
tag = 1

というように数字を割り当て、足し上げで数が多いほうが優先される。
例外は!important。!importantは、先ほどの記述場所による優先順位も、計算による優先順位も無視して、最優先される。

例1:

• #ID div.class ul li = 100 + 1 + 10 + 1 + 1 = 113
• #Id div.class li = 100 + 1 + 10 + 1 = 112

記述ミスのようにみえるくらい、同じタグに対して宣言しているが、この様に書いた場合、上の例の方が優先されるわけだ。
ではもう1例紹介しよう。

例2:

• #ID #Second = 100 + 100 = 200
• #ID .class div.class a.class = 100 + 1 + 10 + 1 + 10 = 122

とてもシンプルな考え方なので、何度か自分でもセレクターを
数字に置き換えてみると覚えてしまうだろう。

テキストばかりでピンとこない場合は、
CSS: Specificity Wars
Star Warsになぞらえて、ビジュアルで解説しているのはこちら。