CSSセレクタの優先順位を指定する!important宣言

CSSはカスケード(段階や構造)化された名前の通り、最後に記述されたセレクタが優先され、各セレクタの優先順位はIDセレクタ、クラスセレクタとなっています。

また、import(ブラウザによっては読み込みが遅くなる)などでCSSファイルを指定した場合もその記述順によって優先されていきましたが、複数のCSSファイルや同名のセレクタなどが重複してしまった場合、優先したい指定が反映されなかったりします。

スタイルシートの内部的な構造が煩雑だったり、セレクタの記述自体の必要性が判断つかない場合などは、!importantルールを使用して通常のセレクタ指定よりも優先してセレクタの指定を反映させます。

!important宣言の記述方法は....

上記で記述した場合、他に同様のセレクタ宣言があってもヘッダーは背景が白、文字色は赤色で表示されます。


どうしても優先させたいプロパティの値がある場合に、事情によりセレクタを指定しなければいけない場合は!importantルールを利用するのよいかもしれません。

例えば他のページでは共通のセレクタを使用していて、特定のページのみ同じ名前のセレクタを使用する必要があるといった場合などでしょうか。