CSS importantを上書きする方法

「外部のスタイルシートにimportantの記述があるが邪魔だから上書きしたい！」

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

CSS importantの上書きについて解説します。

importantについてはこちら↓

対応1：相手よりセレクタの優先度を高くしつつimportantを指定

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

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

例

.example{
    margin: 0 !important;
}

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

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

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

カンタンなのは、相手と同じセレクタをコピーして、その上にbodyやhtmlなどのセレクタを追加することです。これで相手より1点分優先順位が上がるため上書きできます。

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

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

対応2：相手のimportantを消す

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

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

まとめ

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

以上、CSS importantの上書き方法でした。