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

書いた

qiita.com

!importantとは

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

実例

<div class="example">
    <h2>ここに適用したい</h2>
</div>

.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が入り乱れていてよくわからない時など有効(かもしれない)