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

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

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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