!importantとは？ 指定するとどうなる

［!important］は、CSSスタイルが適用される優先順位を最優先にする際に用いられます。
何よりも優先してCSSの指示を効かせるやり方で、CSSスタイルがどうしても効かない場合に使うと、便利です。
ただ、［!important］を使用しすぎると、どのスタイルが優先するか、ブラウザが混乱する為、乱用は避けましょう。

jQueryでの上書きが効かない例

上記の方法ですと、CSSの［!important］が優先してしまい、jQueryでの上書きは出来ないので注意してください。

では、CSSで指定している［color: red !important;］をjQueryの［cssText］で上書きしていきます。

下記はHTML、CSS、jQueryのコードです。

HTML

<p class="txt">cssに指定されている!importantをjQueryで書き換える</p>

CSS

.txt {
color: red !important;
}

jQuery

$('.txt').css({'cssText': 'color: blue!important;'});

以下は実装例です。

See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.

テキストの色をCSSで［color:red!important］ で指定していますが、jQueryで指定した色、［color:blue!important］に変更されます。

CSS書式をそのまま記述することができる［cssText］を使用すると、CSSでの［!important］指定が優先されることなく、上書きできます。

注意

HTML の style 属性で書いたCSSの場合、［cssText］を使用すると指定されていた CSSが全て無効となってしまうので、注意が必要です。