CSSのスタイルが適用されない!?　CSSの適用条件と優先順位について

WEBアプリやホームページ作成をしているときに「CSSに記載したスタイルが効かない??」なんてことはありませんか??

CSSは基本的に後に書いたものが優先されるので、追加したいスタイルをどんどん後に追加していけばいいと思っている方もいるかもしれません。
ですが、実は後に書いても適用されない場合も存在するのです！
「私はこんな感じでスタイルを適用したいのに！」って気持ちが強すぎていきなり「!important」は使わないでくださいね＾＾；
importantを使い始めるとそれ以降に追加したくなった場合、importantの応酬が始まり最終的に何がどう適用されているのかわかりにくいCSSになってしまう可能性があります。
あくまでもimportantは最終手段として使用するということを忘れないでください…(小声)

CSSの適用条件は獲得ポイント数により決まる！

「じゃあどうすれば思った通りに適用されてくれるの？」ってところなんですが、実はCSSには獲得ポイント数により優先順位が決められています。
下記の表に優先順位をまとめてみました。

サンプルをもとに適用されるスタイルを確認してみましょう

下記のCSSを適用した場合、pタグのテキストは何色になるでしょうか?

css_sample.html

<div id="contents">
<p class="text" style="color: darkorange;">色が変わるよ</p>
</div>

css_sample.css

#contents p{
color: red;
}
.first p{
color: blue;
}
.text{
color: green;
}
p{
color: yellow;
}

答えはdarkorangeです。
表を見てわかる通りタグの要素に記載したスタイルは1000ポイントなのでかなり強力な優先順位を与えられています。
タグの要素を消した場合は「css_sample.css」に記載したスタイルが上から順に適用されていく形になります。

まとめ

このようにCSSのスタイルは単純に後に記述したほうが適用されるわけではなく、決められた獲得ポイントに従って適用されていますので、思い通りのスタイルが適用されないときは冷静にポイントを見直してみてください。
また、皆様がCSSを記載する際にはなるべくポイント数が低い状態でスタイルを適用することを意識すると後から変更を加える方が少し楽できると思いますので、意識してみて頂ければと思います。