【CSS】!importantの使い方　優先順位を変更する最終手段について解説してみた

こんにちは朱夏です。

今回は「!important」の使い方について解説してみました。

朱夏

何故かスタイルが適用されない(´・ω・`)

今から付けるスタイルを優先的に適用して欲しいんだけどどうしたらいいんだろう？

既存のサイトを改修する場合などに良く直面する現象なのですが、スタイルの優先度が把握しきれず、適用したいスタイルが反映されないといった事が起こります。

そんな時に使えるのが「!important」です。

「!important」の特徴

「!important」は、CSSでスタイルを指定する時に、最優先で指定する事ができます。

例として、サンプルを置いておきます。

See the Pen
zYGQWBp by 朱夏 (@syunatsu1)
on CodePen.

本来優先度が一番低いはずのp要素で指定したスタイルが、「!important」を付けたことで最優先で反映されています。

基本的な優先順位

「!important」が最優先でスタイルを指定すると言いますが、では、「!important」を使っていない状態での優先順位はどのようになっているのでしょうか？

答えを書くと、順位付けのルールは基本的には以下の様なものになります。

初めに、セレクタの優先順位で順位付けされます。
同じ条件で指定されたスタイルが複数発見された場合は、後から書かれたものを優先してスタイルを指定します。

「!important」の書き方

「!important」は、プロパティ単位で指定します。
プロパティ内の値の末尾に、半角スペース区切りで追記します。

例）

background-color: red !important;

値の後ろに「!important」です。
これだけで簡単に最優先にする事が出来ます。

「!important」の問題点

スタイルを最優先で指定してくれる便利な「!important」ですが、問題点があります。

それは、「!important」の濫用による無意味化です。

「!important」が便利だからと頻繁に使用していると、「!important」を指定したスタイル同士でバッティングを起こすことになります。
こういった状態が発生した場合、「!important」が書かれていない時と同様の優先順位付けがされます。

こうなってしまうと、「!important」を使う意味がなくなってしまいます。

「!important」を使うのは最終手段として、どう頑張ってもスタイルがしてできない場合にのみ使うようにすると良いと思います。

あとがき

というわけで、「!important」について書いてみました。

今回のまとめはこちら。

朱夏

・「!important」は最優先でスタイルを指定できるんだな。

・書き方は”プロパティの値の後ろに「!important」”。

・「!important」はあくまで最終手段、基本ルールを覚えよう。

今回は以上です。
次回もよろしくお願いします。