CSS上で指定したスタイルがなぜか適用されていなかったり、一部を変更したいけど既に指定したCSSが優先されてしまってどうしよう！なんてことありませんか？
こんなとき「!important」を使ったら上手くいくかもしれません！
そういうわけで、今回は「!important」について簡単にまとめてみたいと思います。
!importantとは？
!importantは、CSSスタイルの優先度を上げてくれるコードです。
CSSは上から上書きされていくので、あとから記述したものが優先されます。また、セレクタの中でも以下のような優先度の強弱関係が存在するようです。
style ＞ id ＞ class ＞ タイプセレクタ（pやdiv）
しかし、!importantを使えばpやdivなどのタイプセレクタを最優先に適用させることができるんです！
!importantの使い方
p {
color : orange !important ;
}
このように[プロパティ: 値]のあとに半角スペースを空けて!importantを記述するだけ！
では、実際に使ってみましょう。
〜!important使用前〜
divにオレンジ、classに緑、idに赤を指定してみました。セレクタ間の強弱関係を見てみると、div・class・idの中ではやはりidが最強のようです。
そして、最弱のdivに!importantを施してみます。
〜!important使用後〜
この通り、形勢逆転です！最弱だったdivに指定したオレンジが優先されました。
さいごに
CSSスタイルの優先度を変えてくれる!importantについてまとめてみました。
大変便利ではありますが、あちこちに使用していると何を優先すべきか分からなくなりそうですね。使用はほどほどに、ここぞという時に使いましょう〜。
コメント