!importantなCSSを上書きする

2018-11-26

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

上位要素を利用

<html>
  <body>
    <div class="top">
      <p class="paragraph">I'm sleepy now.</p>
    </div>
  </body>
</html>

.paragraph {
  font-weight: bold !important;
}

となっている場合 I'm sleepy now. となってしまいます．通常の太さに変更するためには上位要素を用いて CSS を適用すればいいだけです．

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

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

On this page