プログラミング勉強日記

2021年3月14日

!importantとは

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

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

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

.parent{background-color:blue;}

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

.child{background-color:red!important}

スタイルシートの優先順位

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

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

1. 同じセレクタの場合は後から呼ばれたものが優先される

!importantを使う上での注意点

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

参考文献

CSSでimportant指定を禁止したい理由を現役エンジニアが解説【初心者向け】
CSSの「!important」とは？CSSが適用されない時の対応方法