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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.