!importantなCSSを上書きする

作成日

2018年11月26日

デフォルトの CSS を上書きしたくても !important で宣言されてしまっている場合,どうやって上書きすれば...と思っていましたが,結構簡単にできるんですね.

上位要素を利用

sample.html
<html>
  <body>
    <div class="top">
      <p class="paragraph">I'm sleepy now.</p>
    </div>
  </body>
</html>
sample.css
.paragraph {
  font-weight: bold !important;
}

となっている場合,通常の太さに変更するためには上位要素を用いて CSS を適用すればいいだけです.

sample.css
.top .paragraph {
  font-weight: normal !important;
}

!important をむやみに使うとメンテ効率が下がるのであまり使いたくないところですが,どうしても変更したいという場合はこういう手もあるんでしょうか.

mktia's note

Research & Engineering / Blockchain / Web Dev

© 2017-2025 mktia. All rights reserved.