CSSが適用される順番ちゃんと理解してる?

css

CSSをしっかり記述しているのに、なぜかスタイルが反映されない・・・という人も多いのでは?

そういったケースでは、CSSが適用される優先順位でミスをしている可能性があります。

普段、何気なくCSSのスタイルを記述していると気づき辛いですが4つの順場を覚えることで分かりやすくなりますよ。

CSSが適用される順番

CSSが適用される順番は以下の通りです。

インライン→id→class→Elements

CSSの優先順位を強制的に変更したい場合

今回はpタグのテキスト文字色を例に取りましたが大規模なwebサイトになるとごっちゃになりそうですよね。

CSSでは優先順位を強制的に1番に持ってくる!importantがあります。

これを使えば順位を無視して強制的にスタイルを反映できますが、あまり乱発するとコードのメンテナンスが低下するのでケースバイケースといったところでしょうか。

こちらの記事で紹介していますので、参考までにどうぞ。

[CSS]!importantとは?

まとめ

いかがでしたでしょうか?今回、CSSが適用される順番を紹介しました。

インライン→ID→class→Elements

の順番となります。基本的に後から記述されたものが反映されますが左に行くほど最優先になり、みぎに行くほど優先度は低くなります。



カテゴリー