2021-03-04

CSS: !important で最優先にする

CSSは使われるセレクタによって強い・弱いがあり、 強い方のスタイル設定が優先されます。
但し例外があって「!important」を指定すると、 最優先の設定として適用されます。

!importantは最優先のスタイル設定なので、 使用しすぎるとスタイル設定の整合性が複雑になる場合もあります。 ですから最低限の使用にとどめておいてください。

!importantを記述する場所は「color: green !important;」のように、 値とセミコロン(;)の間に記述します。

!impotant の使用例

<span class="hoge">文字列</span>

.hoge {
	color: red;
}

span {
	color: green !important;
}

上のスタイル設定の場合、「hoge」クラスのスタイル設定「color: red;」よりも、 span要素の「color: green !important;」の方が適用されます。