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

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