ホーム(記事一覧)へ

CSS importantの解除について

外部のスタイルシートにimportantの記述があるが邪魔だから解除したい!

ということがあることでしょう。

CSS importantの解除について解説します。

importantについてはこちら↓

結論:importantは解除できない

importantはCSSを最強にするCSSです。これを解除できる記述があるのならそっちのほうが最強になってしまいます。

importantを非推奨されているのは解除できないというのも一つの理由です。

対応:importantで上書き

importantは解除できませんが、上書きして実質効かせなくすることは可能です。

上書きする際は相手よりセレクタの優先度を高くしつつ、こちらもimportantをつけます。

.example{
    margin: 0 !important;
}

↑このCSSを上書きしてみましょう。

body .example{
    margin: 100px !important;
}

↑このように相手よりセレクタの優先度を高くしつつ、こちらもimportantをつけます。

上書きするCSSより後述できるのなら同じセレクタでも上書きできます。

セレクタの優先度についてはこちら↓

対応2:importantを消す

importantをつぶすにはimportantを指定するしかありません。

スタイルシートを編集できるなら!importantを削除した方がスマートでしょう。

まとめ

importantは解除できないが、相手よりセレクタの優先度を高くしつつ、こちらもimportantをつけることで上書きできる。

以上、CSS importantの解除についてでした。

関連記事