More than 3 years have passed since last update.

【CSS】!importantとは

Posted at 2021-03-14

#プログラミング勉強日記
2021年3月14日

#!importantとは
　合わせて使用したプロパティを最優先で使用するときに使うのが!importantである。

　親要素に指定したCSSは子要素にも適用されることをCSSの継承という。

HTML

<div class="paent">
  <div class="child"></div>
</div>

CSS

.parent {
  background-color: blue;
}

　このようなプログラムではCSSは子要素にも適用される。継承したCSSを使用せずに強制的に別のCSSで上書きするのが!important指定である。

!importantの指定方法

.child {
 background-color: red !important
}

#スタイルシートの優先順位
　!importantを使うためにはそもそものスタイルシートの優先順位を知っておく必要がある。

1.セレクタによる優先順位
→タイプセレクタ(要素名で対象を指定してスタイルを適用する) < class < id < style

#!importantを使う上での注意点
　!importantは多用してはいけない。最優先がいくつもあった場合、本当に優先すべきプロパティが何かわかんなくなってしまう。
　なので、どうしても必要な場合のみに使用するのがいい。