!important 宣言
!important 宣言は、最も優先度が高いことを示す CSS の宣言です。どこかで !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.example
とdiv
は同じセレクターの対象ではなく、div
全体を対象としていると判断されるためのようです。試してみてください。