備忘録的プログラミングリファレンス

!important 宣言

 !important 宣言は、最も優先度が高いことを示す CSS の宣言です。どこかで !important 宣言があると、その指定値が優先されます。
 ただし、!important 宣言は同じセレクターの対象においてのみ機能します。

!important 宣言
div.example {
	color: blue !important;
}
...
div.example {
	color: red;
}
/* 通常は後で指定された値が優先されるが、!important があるとそちらの設定が優先される */

詳しくは Example を参照してください

 上記の例はdiv.exampleエレメントの文字色を blue で固定しています。そのために同じdiv.exampleエレメントでは blue 以外に文字色の指定できなくなります。
 !important 宣言はこのように同じセレクターの対象において機能します。

 !important 宣言とは別に CSS プロパティの値をキーワードによって指定する方法には以下があります。

キーワード値機能
initial仕様で決められた設定値
inherit親エレメントの設定値を継承
revertブラウザで設定された値
unset継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は initial に同じ

ページ内 Index

構文(Syntax)

CSS

!important

 CSS プロパティに !important を指定することでその指定値が固定値になります。その後に同じ CSS プロパティがあっても !import がある設定が優先されます。

Example

 !important 宣言の例です。

 以下の例はdiv.exampleエレメントの文字色を blue で優先としています。そのために同じdiv.exampleエレメントを後で指定しても blue 以外に文字色の指定ができなくなります。通常は後で指定された方が優先します。
 !important 宣言は同じセレクターの対象において機能します。何が同じセレクターになるかは注意が必要です。

 もしも、divで値を !important 宣言した場合には、div.exampleは同じdivとみなされます。そのために、div.exampleで文字色を指定してもdivで !important 宣言されたことが優先されます。
 逆にdiv.exampleで値を !important 宣言した後に、divで値を変更すると後者のこちらの設定が優先されます。これはdiv.exampledivは同じセレクターの対象ではなく、div全体を対象としていると判断されるためのようです。試してみてください。