!importantについて

!importantとは

!importantとは、CSSにおけるプロパティの優先順位を無視して、強制的に優先する命令です。

style.css

h1 {
    color: blue !important;
}

例えば、h1セレクタに対し!importantを使用する場合、他のCSSプロパティでh1のcolorプロパティを変更しようとしても、!importantを使用したプロパティを最優先にして使用することができる。

セレクタの優先順位とは

1. テキストセレクタの優先順位は、セレクタ < class < id < style の順番

   index.html

   <div class="top" id="top" style="color:red;">サンプル</div>
   

   style.css

   div {
       color: yellow;
   }
   .top {
       color: green;
   }
   #top {
       color: blue;
   }
   

   上記の場合、colorはredが優先される。

2. 同じセレクタなら、後から書いた物が優先される

   style.css

   .top {
       color: red;
   }
   .top {
       color: blue;
   }
   

   上記の場合、blueが優先される。

参考にしたサイト

• CSSの「!important」とは？CSSが適用されない時の対応方法