cssでスタイルが効かない時の優先指定「!important」

2016年4月1日

とっつぁん

css WEBデザイン

この記事は 2 分くらいで読めると思います

あとで読む

!importantルール

!important

あんまり使いたくない、知らない方がコードが綺麗だった。

でも知ってると便利、便利だからこそ多様しちゃう。

やっぱり知らない方がコードが綺麗だった…

そんな感じの!importantルールをご紹介。

!importantとは？

CSSで指定したスタイルを優先する指定です。

例えば「背景オレンジ色の要素内のpタグの例」

p {
  color :#fff;
}
p {
  color :#000;
}

という指定があった時、通常はこのように表示されます。

後から指定した黒の指定が優先される

コード内で下に書かれている指定（後から書かれている指定）が優先されます。

しかし、どうしても白い文字がいいんだ！という場合があります。

そんな時に

p {
  color :#fff !important;
}
p {
  color :#000;
}

と書くと、!importantの指定が優先されます。

!importantで優先された例

まぁさすがにこんな例のソースコードで!important使う人はいないですよね（笑）

黒文字の指定を消せば良いだけですので…

CSSで被ってしまったスタイルの対応

!importantは出来る事なら使いたくない指定です。

スタイルシートのソースをたいした整理もせず!importantを多用していると、

そのうち!importantを指定した要素が2つ…とかになりかねません。

あれ？スタイルが適用されないなと思ったら…他の所で!importantされてるぅ ＼(^o^)／

ってこともあるあるです。

おまけ↓

cssで指定したスタイルが効かない…!importantしても意味が無い、何故だ！？

ホームページを作っているとCSSでスタイルを指定して、ちゃんと指定通りに見えるかの確認作業の繰り返しになるわけですが…

CSSで指定したのに効かない！何がいけなかった！？という事が多々あります。

ワタクシの経験上、そんな時はたいてい簡単な記述ミスです。

• クラス名入れたけど「.」書き忘れてたとか…
• そもそもクラス名綴り間違えてたとか…
• no-repeatと書くところをrepear-noと書いてたとか…

いやぁ…人間って結構アホなミスをするもんですねぇ ◞( 、΄◞ิ౪◟ิ)、