「!important」のCSSの無効化、上書き方法について

css

wordpressでCSSを修正する場合や、誰かの作ったサイトに追記をするときに「! important」が邪魔になることがあります。

追加したHTMLページには「!important」のCSSを適用したくないんだけどなぁ、と思う場合です。
設定されていると、「なんでここで!importantやねん！」みたいなことを思うこともあります（笑）

今回は「!important」を上書き、無効化する方法について備忘録として残しておきます。

「!important」のCSSの上書き方法について

上書きするのは簡単で

さらに上のセレクタから指定してあげればOKです

例えば、次のようなHTMLを想定してみましょう。

<div class="a">
  <div class="b">
    <div class="c">
        test
    </div>
  </div>
</div>

test

</div>

cssはimportantで指定します。

div.c{
  color:red;
}

div.c{

color:red;

}

結果は以下のようになります

test

文字が赤くなっていますね。
それではこの文字を青にしてみましょう。
まずはHTMLを以下のように変更します。

<div class="e">
 <div class="d">
    <div class="c">
     test
    </div>
  </div>
</div>

test

</div>

aとbをdとeに変更しただけです。これだけではまだ文字色は赤のままですね。
既存のCSSは変更せずに文字色を変更するには、CSSに以下のように追記します。

.d div.c{
    color:blue;
}

.d div.c{

color:blue;

}

結果は以下のようになります

test

ちゃんと青文字で表示されましたね。

今回は最初の「test」を赤文字のままにするためにHTMLを変更しました。
しかし、HTMLを変更しなければ最初の「test」も青文字になります。

「!important」は優先度が高めですが、上書きはできます。
自分で作成したサイトでも使えるテクニックですので、覚えておくといつか役に立つかもしれません。