CSSを強制的に上書きする方法

「CSSが効いてないから強制的に上書きしたい！」

CSSを強制的に上書きする方法を解説します。

【結論】!importantをつける

CSSに!importantをつけると強制的に上書きできます。

「!important」を使うとCSSの優先順位を最強にできます。

実装例

<div class="example" id="example2">CSSを強制的に上書き</div>
<style>
.example{
    color: red !important;
}
#example2{
    color: blue;
}
</style>

「!important」はCSSプロパティと値の後ろに「 」(スペース)をあけて記述します。その後ろに「;」(セミコロン)が来ます。

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

!importantについて詳しくはこちら↓

!importantの使い過ぎに注意

CSSを強制的に上書きできる「!important」は便利ですが、使い過ぎに注意です。

なぜなら「!important」をさらに上書きすることが困難であるためです。

「!important」は限定的なclassなど、ここぞというときに使いましょう。

通常の上書き方法

今回は「強制的に」ということで「!important」を紹介しましたが、ふつうにCSSを上書きする方法もあります。

• セレクタを追加して優先度を上げる
• 同じ優先度なら後述する
• style属性でhtmlに指定する

詳しくはこちら↓

【まとめ】CSSを強制的に上書きする方法

!importantをつける

以上、CSSを強制的に上書きする方法でした。