モダンCSSにおける!importantの実践的な使い方

Jun 11, 2026 · 6 min read

!importantは、特定度やソース順に関わらず、宣言をカスケードで確実に勝たせる必要があるときに有効なツールです。2026年時点での最も正当な使用例としては、prefers-reduced-motionのようなアクセシビリティ設定の強制、編集できないサードパーティスタイルのオーバーライド、そしてバグの一時的な切り分けが挙げられます。このフラグはカスケードの通常の優先順位を逆転させます。!importantでマークされた宣言は、競合するセレクターの特定度がどれほど高くても、通常の重みを持つすべての宣言に勝ちます。MDNの特定度に関するドキュメントによると、特定度は同じ重要度の階層内での競合を解決するものです。つまり!importantは特定度の争いに勝つのではなく、その争い自体を回避します。

構文はセミコロンの前に単一のキーワードを置くだけです。

.banner {
  display: none !important;
}

重要なポイント

prefers-reduced-motionは!importantの最も明確なモダンなユースケースです。コンポーネントがどのように作成されているかに関わらず、ユーザーのOS レベルのアクセシビリティ設定がコンポーネントレベルのアニメーション宣言をオーバーライドできるよう保証するのに役立ちます。
Tailwind CSS v4では、bg-red-500!モディファイアは!importantを使用したルールにコンパイルされます。Tailwindのユーティリティを使ってサードパーティスタイルをオーバーライドしている場合、すでに設計上!importantを使用していることになります。
CSSカスケードレイヤー（@layer）を使うと、特定度の代わりにレイヤー順序で優先権を制御できるため、通常の宣言における大半のユーティリティクラスの!importantが不要になります。ただし、!important宣言ではレイヤー順序が逆転します。
カスタムプロパティを!importantでマークすると、変数の値の割り当てにのみ影響します。このフラグはvar()を通じて伝播しません。
既存の!importantをオーバーライドするには、ソース順でより後に宣言された、同等以上の特定度を持つ別の!importantが必要です。または適切なカスケードレイヤーを使用する方法もありますが、!important宣言ではレイヤー順序が逆転することを忘れないでください。

CSSで!importantを使うべき場面：正当なケース

!importantが正当化される場面は4つあります。コンポーネントのアニメーションに対するユーザーのアクセシビリティ設定の強制、制御できないサードパーティCSSのオーバーライド、単一目的のユーティリティクラスの定義、そしてカスケードのバグの一時的な切り分けです。メンテナンスコストは現実的なものです。!importantルールは別の!importantまたはレイヤー順序によってのみオーバーライドできます。そのため、以下のケースに限定して使用し、それぞれの理由をドキュメントに残してください。

prefers-reduced-motionの強制

prefers-reduced-motionは!importantの最も明確なモダンなユースケースです。このメディア特性はOSレベルのユーザー設定を反映するもので、前庭障害や動きに敏感なユーザーが一度設定するものです。これを尊重することはWCAG 2.1 達成基準 2.3.3で推奨されています。実際には、サードパーティのカルーセル、モーダルライブラリ、アニメーションランタイムが高い特定度でまたはインラインスタイルとしてanimationやtransitionの宣言を注入するため、通常のメディアクエリルールではカスケードの争いに負けてしまいます。!importantを使うことで、オーバーライドが確実に勝てるようになります。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

ユニバーサルセレクターを使うことで、サードパーティのコンポーネントがアニメーション宣言をどのように記述・注入していても、直接ターゲットにしにくい擬似要素も含めてオーバーライドが適用されます。

この失敗パターンはユニットテストで検出しにくいです。CSS特定度のアサーションは実際のサードパーティ注入を再現できないからです。reduced-motionが有効なデバイスを使用しているユーザーのセッションリプレイを使うと、オーバーライドが実際にカスケードで勝っているかどうかを確認できます。録画でアニメーションが再生されるかどうかを確認することで、特定度を単独で推論するよりも信頼性高くリグレッションを発見できます。

編集できないサードパーティCSSのオーバーライド

!importantは、ソースを編集できないサードパーティCSSに対する最も直接的なオーバーライド手段です。よく発生するケースは3つあります。フレームワークユーティリティ（Bootstrap、Material UI）、ランタイム注入スタイル（styled-components、Emotion）、そしてTailwind自身の!モディファイアです。

フレームワークユーティリティ（Bootstrap、Material UI）。 コンポーネントフレームワークは、ベーススタイルに勝つよう調整されたセレクターを提供します。一時的なオーバーライドが必要で、フレームワークのCSSを再構成できない場合、自分のスタイルシートに!important宣言を追加することで、特定度をエスカレートさせることなく勝てます。

/* Bootstrap の .btn-primary のセレクター特定度に
   合わせることなく背景色をオーバーライドする */
.btn-primary {
  background-color: #2ecc71 !important;
}

CSS-in-JSの注入順序（styled-components、Emotion）。 styled-componentsは生成したスタイルをランタイムにドキュメントの<head>に注入します。またEmotionはキャッシュ API を通じて設定可能な挿入動作をサポートしています。カスケードにおけるソース順序は、ファイルの順序ではなく注入のタイミングによって決まります。バンドルの早い段階で読み込まれたグローバルスタイルシートは、同じ特定度において後から注入されたコンポーネントスタイルに負けることがあります。注入順序を変更できない場合、グローバルシートに!importantを使うのが最も直接的なオーバーライド方法です。

Tailwindの!モディファイア。 Tailwindを使ってサードパーティスタイルをオーバーライドしている場合、すでに設計上!importantを使用していることになります。Tailwind v4のドキュメントによると、ユーティリティに!を付加する（bg-red-500!）と、!importantフラグを持つルールにコンパイルされます。モディファイアの位置はv4で変更され、以前のバージョンでプレフィックス形式（!bg-red-500）が使われていたのに対し、現在はサフィックス形式がドキュメントに記載されている構文です。DevToolsでコンパイル後の出力を確認すると、宣言にフラグが直接付与されていることがわかります。

ユーティリティクラスの強制（と@layerを使った代替手段）

.hiddenや.sr-onlyのような単一目的のユーティリティクラスは、!importantの正当なユースケースです。これらは無条件に機能しなければならないからです。.hiddenが付いた要素は、コンポーネントのセレクターが特定度で勝ったとしても、再表示されるべきではありません。

.hidden {
  display: none !important;
}

カスケードレイヤーを使えば、特定度の負債なしに同じ保証が得られます。レイヤーなしのシートのスタイルは自動的にすべての名前付きレイヤーより優先されるため、レイヤーなしのブロックに書かれた.hidden { display: none; }は!importantなしでもレイヤー化されたコンポーネントスタイルに勝てます。

@layer base, components;

@layer components {
  .card .actions { display: flex; }
}

/* レイヤーなし — 通常の宣言においてすべての名前付きレイヤーより優先される */
.hidden {
  display: none;
}

これは通常の宣言にのみ当てはまります。!important宣言ではレイヤー順序が逆転し、より前のレイヤーのルールがより後のレイヤーのルールに勝ちます。CSSカスケードレイヤーは現行のChrome、Firefox、Safari、Edgeで幅広くサポートされています。

デバッグ：競合の切り分けのための一時的な!important

一時的な!importantは「なぜスタイルが適用されないのか？」を素早く診断するための手段です。追加することで問題が解決すれば、原因は特定度またはカスケードの競合です。それでも適用されない場合は、セレクターのタイポ、誤ったターゲット、または継承の問題が原因です。実際の原因を特定したら削除してください。

Smashing Magazineの!importantガイドを参考にした関連テクニックとして、問題を修正するのではなく表面化させる手法があります。ここではaltテキストが欠けている画像にフラグを立てる例を示します。

img:not([alt]) {
  outline: 3px solid red !important;
}

borderではなくoutlineを使うのは、ボックスモデルに影響しないためで、フラグが立てられた要素がレイアウトをずらしません。!importantにより、コンポーネントスタイルがどのような状態であっても診断用のアウトラインが確実に表示されます。

Firefox DevToolsはオーバーライドされた宣言を取り消し線付きで表示します。ルールビューでルールに取り消し線が表示されている場合、そのルールはカスケードで負けており、タイポではなく!importantまたは特定度の競合が原因であることを示しています。Chrome DevToolsも同様の動作をします。

!importantのモダンな代替手段

特定度に依存せずに優先権を制御できるモダンな機能が3つあります。明示的な順序付けのための@layer、ゼロ特定度のデフォルトのための:where()、そして特定度のペナルティなしにセレクターをグループ化するための:is()です。これらは、開発者が!importantに手を伸ばすきっかけとなる特定度のエスカレーションを解決します。典型的なアンチパターンとは、.button { color: blue; }から始まり、#sidebar .button { color: green; }、そしてbody.home #sidebar .button { color: red; }と、修正のたびにより特定度の高いセレクターを強いられるパターンです。

機能	特定度への影響	使用場面
`@layer`	特定度に依存しないレイヤー順序による優先権	自分のコードとフレームワークのどちらのスタイルシートが「勝つか」を決める
`:where()`	常に`(0,0,0)`	何でもオーバーライドできる低優先度のデフォルト
`:is()`	引数リストの中で最も高い特定度を採用	セレクターを長々と書き直すことなくグループ化する

優先権の順序付けのための@layer

@layerは特定度をエスカレートさせるのではなく、レイヤー順序によって優先権を宣言します。優先度の高いレイヤーの宣言は、特定度に関わらず、優先度の低いレイヤーの通常の重みを持つすべてのルールに勝ちます。しかも!importantは一切不要です。

/* フレームワークは特定度ではなくレイヤー順序によって
   オーバーライドに負ける */
@layer framework, overrides;

@layer framework {
  .btn-primary { background-color: blue; }
}

@layer overrides {
  .btn-primary { background-color: #2ecc71; }
}

これは、Bootstrapに勝つために.btn-primary { background-color: #2ecc71 !important; }と書くことのレイヤー版に相当します。フレームワークを優先度の低いレイヤーに、オーバーライドを優先度の高いレイヤーに配置することで、!importantフラグなしにオーバーライドが勝てます。レイヤーの順序付けはCSS Cascade Level 5仕様で規範的に定義されています。

ゼロ特定度のデフォルトのための:where()

:where()は引数全体の特定度を(0,0,0)にするため、後から記述されたルールやより特定度の高いルールが争いなくオーバーライドできます。下流のコードが完全にオーバーライドすることを想定したベーススタイルやリセットに使用してください。

/* これらのデフォルトは簡単にオーバーライドできる — 特定度の負債なし */
:where(.card, .panel) a {
  color: inherit;
  text-decoration: none;
}

書き直しなしにグループ化するための:is()

:is()は繰り返しのセレクターリストをまとめますが、引数の中で最も高い特定度を採用します。これは:where()とは逆の動作です。MDNのリファレンスによると、:is(#header, p) spanはグループ全体に対して#headerの特定度を採用します。そのため:is()はグループ化に便利ですが、低い特定度が必要な場合には適していません。その場合は:where()を使用してください。

既存の!importantをオーバーライドする方法

!important宣言をオーバーライドするには、ソース順でより後に宣言された同等以上の特定度を持つ別の!importantが必要です。または、その宣言が属するカスケードレイヤーを変更する方法もありますが、!important宣言ではレイヤー順序が逆転することを忘れないでください。通常の宣言は!importantの宣言に勝てません。信頼できる方法は2つあります。

同等以上の特定度で、ソース順でより後に、かつ!importantを付ける。 同じ特定度では、後に記述された.mytitle { color: blue !important }がソース順で勝ちます。より特定度の高い#title.mytitle { color: blue !important }は特定度で勝ちます。
レイヤー順序 — 逆転の注意点あり。 @layer内では、!importantの優先順位が逆転します。優先度の低いレイヤーの!importantルールが、優先度の高いレイヤーの!importantルールに勝ちます。この逆転はCSS Cascade Level 5で規範的に規定されています。

@layer base, utilities;

@layer base {
  .text { color: red !important; }
}

@layer utilities {
  .text { color: blue !important; }
}
/* 結果: red。!important ではより前のレイヤーが勝つ —
   通常の宣言のレイヤー順序とは逆になる。 */

サードパーティの!importantと戦っていて、オーバーライドがレイヤー内にある場合は、どのレイヤー順序が適用されるかを確認してください。important宣言では、後のレイヤーではなく前のレイヤーにルールを置く必要があるかもしれません。

開発者がはまりやすいエッジケース

セレクターの競合から得られる直感に反する!importantの動作が3つあります。インラインスタイル、カスタムプロパティ、そしてトランジションです。

インラインスタイル。 スタイルシートのルールに!importantを付けると、インラインのstyle属性をオーバーライドできます。ただし、そのインラインスタイル自体にも!importantが付いている場合を除きます。インラインスタイルは特定度のスコアではなく、CSS Cascade Level 4仕様が明示しているように、カスケードの別の部分に属します。そのため、多くの開発者がインラインスタイルは常に勝つと思っていますが、authorの!importantルールは通常のインライン宣言に勝てます。

カスタムプロパティはvar()を通じて!importantを伝播しない。 カスタムプロパティに!importantを付ける（--brand-color: blue !important）と、そのプロパティの登録自体にのみ影響します。フラグはvar(--brand-color)を通じて伝播しないため、その変数を使用するプロパティはimportantとして扱われません。CSSカスタムプロパティ仕様では、このフラグは変数自身のカスケードに適用されるものであり、その値を使用する側には適用されないと定義しています。

:root {
  --brand-color: blue !important; /* --brand-color 自身のカスケードに適用される */
}

.button {
  /* var を使っていても、これは通常の宣言 — important ではない */
  background: var(--brand-color);
}

トランジションは一時的に!importantをオーバーライドできる。 アクティブなCSSトランジション中、ブラウザはトランジションが完了するまで!important宣言とは異なる中間値を表示することがあります。CSSトランジション仕様では、トランジション中の値をカスケードの別のレベルに配置しており、これにより本来勝つべき宣言をオーバーライドしているように見える動作が生じることがあります。

まとめ

!importantは、アクセシビリティ設定を強制する場合、編集できないコードをオーバーライドする場合、またはバグを切り分ける場合に真価を発揮します。スタイルが適用されないときのデフォルトの手段として使うべきではありません。それ以外のケースでは、@layerと:where()を使えば特定度の負債なしに優先権を制御でき、現行ブラウザでもサポートされています。次にサードパーティのスタイルシートとの競合で負けたときは、まずカスケードレイヤーで解決できないか確認してください。そして!importantは、オーバーライドがソース順や特定度に依存できない本当に必要なケースのために取っておきましょう。

よくある質問

この2つの疑似クラスは見た目は同じですが、特定度の扱いが正反対です。:where()は常にゼロの特定度を持つため、後から記述されたルールやより特定度の高いルールが争いなくオーバーライドできます。リセットやデフォルトスタイルに最適です。一方:is()は引数の中で最も高い特定度を採用するため、:is(#header, p) spanはグループ内のすべてのセレクターに対してIDレベルの#headerの特定度を採用します。スタイルを簡単にオーバーライドしたい場合は:where()を使い、高い特定度を受け入れられるグループ化にのみ:is()を使用してください。

はい、authorスタイルシートのルールに!importantを付けると、インラインのstyle属性をオーバーライドできます。ただし、そのインラインスタイル自体にも!importantが付いている場合を除きます。インラインスタイルは特定度のスコアではなく、セレクターベースのスタイルシートルールとは異なる形でカスケードに参加するため、重要度が特定度より先に解決されます。多くの開発者はインラインスタイルが常に勝つと思っていますが、通常のインライン宣言はauthorの!importantルールに負けます。インラインからauthorの!importantルールに勝つには、インライン宣言自体に!importantフラグが必要です。

!important宣言ではレイヤー順序が逆転するからです。通常の宣言では優先度の高い（後に宣言された）レイヤーが勝ちますが、!important宣言ではカスケードがレイヤー順序を逆転させるため、前の優先度の低いレイヤーの!importantルールが後のレイヤーの!importantルールに勝ちます。これはCSS Cascade Level 5で規範的に規定されています。オーバーライドが優先度の高いレイヤーにあり、サードパーティの!importantルールに対抗するために!importantを追加した場合、実際にはルールをより前のレイヤーに移動させる必要があるかもしれません。

importantモディファイアを使用した場合のみです。Tailwind CSS v4では、bg-red-500!のようにユーティリティの末尾に感嘆符を付けると、出力CSSで!importantフラグを持つ宣言にコンパイルされます。bg-red-500のような通常のユーティリティは!importantを出力しません。モディファイアの位置はv4でサフィックス形式に変更され、以前のバージョンでは!bg-red-500のようなプレフィックス形式が使われていました。つまり、サードパーティのスタイルに勝つためにTailwindのimportantモディファイアを使うことは、!importantを直接書くのと同じカスケードの仕組みであり、ユーティリティ構文で表現しているだけです。

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..