Help us understand the problem. What is going on with this article?

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

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

nknkt
国境の壁をデザインしている
http://kannno.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away