ホーム(記事一覧)へ

CSS !importantが効かないときの原因と解決方法7選

こんにちはテイクです。ホームページを作り続けて9年になります。

CSSは同じセレクタに同じCSSプロパティを指定されたとき、どちらか一方しか効きません。そのためCSSには優先度があります。

さらにその優先度を無視して最優先にする方法が「!important」を追加することです。

しかし、!importantを指定してもCSSが効かないときがあります。

私もこの現象になりましたが以下の方法で直してきました。

CSS !importantが効かないときの原因と解決方法を説明します。

以下の記事で「!important」の基本について詳しく記載しています。

競合相手に!importantがついていないか

解決方法:優先度を高くする or 競合相手の「!important」を消す

「!important」はCSSの優先度を最大にしますが、それはあくまで競合しているCSSに「!important」がなければの話です。

競合相手にも「!important」がついている場合、「!important」以外の優先度で決定します。

div{
    margin: 10px !important;
    /*コッチを優先させたい*/
}

div{
    margin: 20px !important;
    /*こちらにも!importantがついていて かつ優先度が高いためこちらが優先される*/
}

解決方法は以下の2つに一つです。

優先度を高くする

/*優先度を高くする*/
body div{
    margin: 10px !important;
    /*コッチを優先させたい*/
}

div{
    margin: 20px !important;
}

競合相手の「!important」を消す

div{
    margin: 10px !important;
    /*コッチを優先させたい*/
}

div{
    margin: 20px;/*!importantを消す*/
}

CSSの優先度については以下の記事を参考にしてみてください。

スペルミスをしていないか

意外とスペルミスをしている場合があります。

ドリームウィーバーなどでは「!important」が予測変換で出てこないため、自分で入力します。

!important」です。よく見てください。

以下チェックしましょう。

ビックリマーク「!」を忘れていないか

失敗例

div{
  margin:10px important;
}

成功例

div{
  margin:10px !important;
}

「important」ではなく「!important」です。「!」が頭に必要です。

「m」と「n」を混同していないか

失敗例

div{
  margin:10px !inportamt;
}

成功例

div{
  margin:10px !important;
}

「m」も「n」も「ん」の発音のため間違いがちです。確認しましょう。

「!important」の使い方を間違えていないか

CSSの前に書いていないか

失敗例

div{
  !important margin:10px;
}

成功例

div{
  margin:10px !important;
}

「!important」はCSSの後に書きます。

セミコロン「;」の後に書いていないか

失敗例

div{
  margin:10px;!important
}

成功例

div{
  margin:10px !important;
}

「!important」はCSSとセットです。「;」の前に書きます。

!importantを指定したつもりになっていないか

失敗例

div{
  margin:10px !important;
  padding:10px;
}

成功例

div{
  margin:10px !important;
  padding:10px !important;
}

「!important」はセレクタ単位ではなく、CSSプロパティ単位で指定します。

失敗例の場合「margin」には指定していますが、「padding」には指定されていません。

上記の方法でも「!important」が効かない場合は以下の記事を参考にしてみてください。

max-widthを超えようとしていないか

失敗例

<style>
.example{
    max-width: 100px;
    width: 300px !important;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example">

成功例

<style>
.example{
    max-width: none;
    width: 300px;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example">

max-widthは最大幅、min-widthは最小幅を指定するCSSです。これが指定されているとwidthに!importantをつけようが超えることはできません。

max-widthをnoneで初期化するなどmax-width・min-widthのほうを修正しましょう。

まとめ

!importantが効かないときは下記をチェックしてみましょう。

  1. 競合相手に!importantがついていないか
  2. ビックリマーク「!」を忘れていないか
  3. 「m」と「n」を混同していないか
  4. CSSの前に書いていないか
  5. セミコロン「;」の後に書いていないか
  6. !importantを指定したつもりになっていないか
  7. max-widthを超えようとしていないか

以上、CSS !importantが効かないときの原因と解決方法でした。

関連記事