CSSが適応される優先順について

CSSは下に書かれている記述が優先される

CSSをガリガリ書き込んで、ページに反映・・・と思ったのに反映されない！！なんてことはありませんか？
そのCSS、書き込む順番に問題があるのかもしれません。

CSSは下に書かれている記述の方が優先されるという特性を持っています。
たとえば、次のHTMLとCSSではどのような動作になるでしょうか。

CSSで最初に文字サイズを14px、太文字、文字色を青くする指定をしています。
次に文字サイズを18px、太さを通常にする指定をしています。
この場合、下にある方が優先されるので、文字が18pxになり、太文字になりません。そして文字の色は青になります。

CSSファイルは上から順に指示をされています。下の記述の方が後からの追加指示になるので、下の方が優先されます。
例えば「ハガキを10枚、インクジェット紙に印刷して」という指示をもらったとします。
その後に「印刷枚数を全部で30枚に増やして、宛名も印刷して」と追加指示を貰ったなら印刷されるハガキは「インクジェット紙30枚に宛名と裏面が印刷された物」になりますよね。
つまりは下に書かれたCSSは追加指示なんです。

この例は少ないCSSしかありませんが、CSSの記述が多くなると探すのが難しくなります。
上手く適応されない時には、同じ要素・class名・id名でCSSを適応させている箇所はないか、探してみてください。
いろいろとCSSで指定しても、その指示通りのデザインが反映されない場合は、そのCSS以降の部分に原因があるかもしれません。

外部CSSを複数読み込んだ場合も下にあるCSSファイルが優先される

ホームページのヘッダー（ページの上部）やフッター（ページの下部）、見出しのデザインなど、全てのページに登場する要素のCSSをまとめたファイルと、ページ毎のデザインを指定したCSSをまとめたファイルなど、ホームページのデザインを管理しやすくするために外部CSSを複数作成して、読み込ませることはとても多くある場面だと思います。

複数のファイルを読み込ませる場合は、head要素にこのように記述されています。

もしも「base.css」と「layout.css」に同じ要素・class名・id名を指定したCSSがあったとしたら、下に書かれている「layout.css」の記述の方が優先してWebページに反映されます。

HTML要素に直接書かれた方が優先度が高い

HTML要素に直接CSSを書く方法を以前紹介しました。（第16回：CSSの文法とホームページに適用させる3つの方法）
外部CSSや、htmlに書き込む方法よりも、HTML要素に直接書かれた指定の方が優先して適応されます。
デザインを直したいのに、なかなか記述が見つからない場合にはHTML内を探してみましょう。

強制的に優先させる方法について

下に書かれた記述が優先されるという、CSSの仕様が理解できていても、どうしても上の方に書かなければならない場合や、デザインが反映されない場面というのは出てきます。
そうなった時に別のデザインを考えるのも一つの方法ですが、強制的にCSSを適応させる方法があります。
それは、「!important」を書き込む方法です。
先ほどのCSSを例にあげてみましょう。

太字にする指定の後ろに半角スペース!importantと追記しました。
下に続いて書かれているCSSに文字の太さを通常に戻す記述がありますが、太字の指定の方が強制的に優先されるので、太文字になります。

このように、CSSが適応されない原因を解決できない場合には強制的にCSSを指示する事ができます。
ですがこれは最後の手段です。
強制的にCSSを割り当てることができるので、便利だと思うかもしれませんが、「!important」を指定しても下が優先されるという根本は変わりません。それにCSSの記述量も増えて汚くなるので、メンテナンス性が悪くなってしまいます。
最終的には「!important」を付ければ解決できますが、なるべく使わないようにしてください。

まとめ

・下に書かれた記述が優先される
・外部CSSにしている場合、読み込み順が後の方が優先される
・CSSの記述順に関係なく、HTML要素に直接書いた方が優先度が高い
・!importantを付ければ強制的に割り込んでCSSが適用される