実行できるCSSドキュメント: !important

Q: !important を上書きするにはどうすればいいですか？

詳細度がより高い別の !important 宣言を書くか、詳細度が同じでスタイルシート内で後に来る !important 宣言を書きます。!important 付きのインライン style は、スタイルシートのどの !important にも勝ちます。

Q: !important はインラインスタイルより優先されますか？

はい。スタイルシートで !important を付けた宣言は、style 属性の通常の宣言に勝ちます。ただし、インライン側の宣言にも !important が付いている場合は勝てません。

Q: !important は使わないほうがよいですか？

詳細度の争いに勝つために使うなら、避けるべきです。次に上書きするときにも !important が必要になり、スタイルシートが変更しにくくなります。常に適用すべきユーティリティクラス (.hidden など)、外部ライブラリのインラインスタイルの上書き、ユーザースタイルシートでは妥当な使い方です。

!important の働き

値の後に !important を付けると、その宣言は同じ要素の同じプロパティに対するすべての通常の宣言に勝ちます。セレクタの詳細度もソースの順番も関係なくなります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

!important がなければ ID セレクタが勝ち、文字は青になります。エディタで !important を消して確かめてみてください。

書き方

selector {
  property: value !important;
}

値の後、セミコロンの前に書きます。適用されるのはその 1 つの宣言だけで、ルール全体ではありません。ショートハンドでも使え (margin: 0 !important; で 4 辺すべてが important になります)、style 属性の中でも使えます。

優先順位

ページの作成者が書くスタイルを、弱いものから強いものの順に並べると次のとおりです:

順位	宣言	例
1	スタイルシートの通常の宣言	`p { color: blue; }`
2	`style` 属性の通常の宣言	`<p style="color: blue">`
3	スタイルシートの `!important`	`p { color: blue !important; }`
4	`style` 属性の `!important`	`<p style="color: blue !important">`

同じ順位の中では詳細度で決まり、それも同じなら宣言が現れる順番で決まります。後の宣言が勝ちます。

!important の日常的で正当な使い道は 1 つだけです。外部ウィジェットが書いたものなど、自分では編集できないインラインスタイルを上書きすることです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

2 つの宣言がどちらも !important のとき

!important 同士では通常のルールに戻ります。詳細度が高いほうが勝ち、同じなら後の宣言が勝ちます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

これが !important の付け合いが起きる仕組みです。あるルールが使うと、それを上書きするルールも使わざるを得なくなり、また詳細度の競り合いが始まります。

CSS の詳細度を 1 つの表で

詳細度はセレクタの重みです。3 つの数を数えます:

列	数えるもの	セレクタの例	詳細度
A	ID セレクタ	`#nav`	(1,0,0)
B	クラス、属性、疑似クラス	`.btn`, `[type="text"]`, `:hover`	それぞれ (0,1,0)
C	型セレクタ、疑似要素	`p`, `::before`	それぞれ (0,0,1)
なし	`*`、結合子 (`>`, `+`, `~`, スペース)	`*`, `ul > li`	加算なし

まず A 列を比べ、同じときだけ B、次に C を見ます。そのため #nav a (1,0,1) は .menu .item .link a (0,3,1) に勝ちます。ID が 1 つあれば、クラスがいくつあっても上回ります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

この表を理解していれば !important を避けられます。「CSS が効かない」問題の多くは、どこかにもっと詳細度の高いルールがあることが原因です。DevTools の Styles パネルで、自分の宣言に取り消し線が引かれているのが見えます。

もっときれいな方法

詳細度を合わせて、順番に任せる。 自分のスタイルシートをライブラリの後に読み込み、少なくとも同じ詳細度のセレクタを使います。
:where() で相手のルールの詳細度を下げる。 :where() の中身はすべてゼロとして数えられるので、これで書いた基本スタイルは簡単に上書きできます。
CSS 変数をフックにする。 var(--btn-bg) を読むコンポーネントなら、セレクタと争わずにテーマを変えられます。CSS 変数を参照してください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

JavaScript から !important を設定する

element.style.color = 'red !important' は動きません。値が無効として無視されます。3 つ目の引数を付けて setProperty を使います:

el.style.setProperty('color', '#f59e0b', 'important');

よくある間違い

書く位置を間違える。 color: !important red; は無効です。値の後に書きます。
@keyframes の中で使う。 キーフレーム内の !important 付きの宣言は無視されます。
あらゆる競合をこれで解決する。 DevTools で勝っているルールを見つけ、その詳細度に合わせるか下げましょう。
別のプロパティにも効くと思う。 color: red !important は background には何もしません。
インラインの !important が勝つことを忘れる。 ページのスタイルシートのどのルールも style="color: red !important" は上書きできません。JavaScript などで属性そのものを変更しましょう。

よくある質問

CSS の !important は何をしますか？

同じ要素の同じプロパティに対するすべての通常の宣言よりも、その宣言を優先させます。セレクタの詳細度や順番は関係ありません。値の後に color: red !important; のように書きます。

!important を上書きするにはどうすればいいですか？

詳細度がより高い別の !important 宣言を書くか、詳細度が同じでスタイルシート内で後に来る !important 宣言を書きます。!important 付きのインライン style は、スタイルシートのどの !important にも勝ちます。

!important はインラインスタイルより優先されますか？

はい。スタイルシートで !important を付けた宣言は、style 属性の通常の宣言に勝ちます。ただし、インライン側の宣言にも !important が付いている場合は勝てません。

!important は使わないほうがよいですか？

詳細度の争いに勝つために使うなら、避けるべきです。次に上書きするときにも !important が必要になり、スタイルシートが変更しにくくなります。常に適用すべきユーティリティクラス (.hidden など)、外部ライブラリのインラインスタイルの上書き、ユーザースタイルシートでは妥当な使い方です。

CSS の詳細度はどう計算しますか？

3 つの列を数えます。ID セレクタ、次にクラス・属性・疑似クラス、最後に型セレクタと疑似要素です。先頭の列から順に比べるので、#nav a (1,0,1) は .menu .item a (0,2,1) に勝ちます。全称セレクタ * と結合子は何も加算しません。