CSSの優先度を覆す最後の手段!importantについて

  • 0
    いいね
  • 0
    コメント

    !importantとは

    !importantをつけるとclass、IDなどのCSSの優先度を無視して最優先で適用することができる。

    実例

    index.html
    <div class="example">
        <h2>ここに適用したい</h2>
    </div>
    
    style.css
    .example h2{
        color: blue;
    }
    
    h2{
        color: red !important;
    }
    

    値の後ろに!importantをつけて使う。

    CSSのポイント換算

    少しおさらい、

    セレクタ 詳細度
    style="" 1000
    ID(#) 100
    class(.) 10
    タグ 1

    このようにCSSは加算式で優先順位が決めれている。

    !importantはこれら一切を無視して適用される

    実際どこで使うのか考える

    実際、制作時に使うと破綻を持ち込みそうな予感しかしないし、最後の手段として覚えておく程度だと思ったが、少し考えて見た。

    CMSやwebサイト作成ソフトで使う

    WordPressなどのCMSや、Jimdoなどの最初からマークアップされているものに少しCSSを足したいとき、もうclassやIDが入り乱れていてよくわからない時など有効(かもしれない)