Posted at

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

More than 1 year has passed since last update.


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