はじめに

CSSを見ていると使われている!importantの挙動について、前回詳細度についてまとめた際に!importantも関わってくる部分ではありますので、まとめておきます。

前回の記事→CSS適応の優先順位（詳細度）について

今回も動作確認のためにこちらのサイトを使用します。→　JS Bin

!importantについて

!important ルールがスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。

引用:!importantの例外

つまり!importantは最強ということですね。
ただ最強であるが故に使いどころは選んだ方がいいみたいです。
CSSリファレンスには!importantを使用する前に詳細度を上げることを考えましょうと書かれています。
実際に使用する場面としては
・ページ固有の CSS が外部の CSS(ライブラリー等)を上書きする場合。
・詳細度の中では最強のインラインスタイルの上書きをする場合。
・高い詳細度のものを上書きする場合。
・ウェブアクセシビリティの確保。
などが挙げられるようです。

それでは実際に試してみます。

1

詳細度は同じクラスセレクターを指定していますので、後に書いた方が適応されますが、!importantが使用されていますので、先に書いた方が適応されています。

2

親要素に!importantを使用しても継承で上書きはされないようです。

3

!importantでインラインスタイルのスタイルを上書き出来ています。

まとめ

時々見かけていた!importantですが、用法用量を守って正しく使用することが大事だと思いました。