CSSを記述しても指定したスタイルが反映されない、といった経験はないでしょうか。
誰もが一度は経験していると思われるCSSの優先順位の問題。今回はCSSの優先順位を変更する!importantを紹介します。
CSSの優先順位について
CSSの特性として、前に定義されたスタイルは後に定義されたスタイルで上書きされるという特性があります。
例として以下のようなスタイルがあるとします。
/* .boxの背景色を黒にする */
.box {
backgroud-color: black;
}
/* .boxの背景色を赤にする */
.box {
backgroud-color: red;
}
/* .boxの背景色を黄色にする */
.box {
backgroud-color: yellow;
}上記のようなスタイルを定義して場合、.boxの背景色は黄色になります。
最初は黒でしたが、その後赤で上書きされ、最後に黄色で上書きされた形となります。このように、最後に書かれたスタイルが適応されます。
!importantの特性について
先ほどのスタイルだと最終的には背景色が黄色になりますが、優先順位を上げて背景色が赤になるように定義してみます。
.box {
backgroud-color: black;
}
.box {
backgroud-color: red !important; /* 背景色を赤にする為優先順位を上げる */
}
.box {
backgroud-color: yellow;
}このようにCSSの値の後に!importantを記載すると優先順位が一番上となり背景色が赤になります。
では、!importantの記述が複数あった場合はどうなるでしょうか?
.box {
backgroud-color: black;
}
.box {
backgroud-color: red !important; /* 背景色を赤にする為優先順位を上げる */
}
.box {
backgroud-color: blue !important; /* 背景色を青にする為優先順位を上げる */
}
.box {
backgroud-color: yellow;
}このように!importantが複数ある場合は、CSSの特性に基づいて後に書かれたスタイルが適応される為、背景色は青となります。
さいごに
いかがでしたでしょうか。
今回は単純なCSSとなりますが、記述の多いCSSだとCSSの特性に基づいて記述していっても思った通りのスタイルが適応されない場面があります。そうした際に!importantが役に立つのですが、その後のCSSの構成に問題が生じる場合がありますので、これは最終手段となり出来れば使わずに済むような構成にしていきたいものです。
