CSS優先順位と詳細度の早見表｜!importantが効かない原因と直し方

CSSの優先順位とは、同じ要素の同じプロパティに複数の指定が当たったとき、どれを採用するかを決めるルール（カスケード）のことです。 判定は「!important かどうか → インライン style かどうか → @layer の順番 → 詳細度 → @scope の近さ → 書いた順番」の順に進み、上の段階で決着がつけば、下の段階は見られません。詳細度（セレクタの強さ）は、この流れの4番目に登場する1つの要素です。

この記事では、セレクタ別の詳細度の一覧と、カスケード全体の判定順のフローチャートを載せ、「!important を付けたのに上書きされない」ケースを1つずつ再現しました。結果はすべて Playwright（Chromium 141.0.7390.37）で getComputedStyle() の値を読み取ったものです。詳細度の数値は、DevTools が内部で使っている仕組み（Chrome DevTools Protocol）から取得した値を載せています。

CSS優先順位の早見表

判定の順番（上から順に比べ、差がついた時点で決まる）

セレクタ別の詳細度（A-B-C 表記）

詳細度は A（ID）- B（クラス・属性・疑似クラス）- C（タイプ・疑似要素） の3つの数で表します。左の桁から比べ、大きいほうが勝ちます。

この表の詳細度は、Chromium 141 が各セレクタに対して実際に計算した値です（CSS.getMatchedStylesForNode で取得）。

カスケード全体の判定順（フローチャート）

ブラウザは、同じプロパティに当たった複数の宣言を、次の順でふるいにかけます。MDNの「Introduction to the CSS cascade」に書かれている順番を、制作でよく出会う範囲（自分で書くCSS）に絞って図にしました。

flowchart TD
  S["同じプロパティに複数の宣言が当たった"] --> R{"セレクタと@mediaは<br>その要素に一致している?"}
  R -- 一致しない --> X["候補から外れる"]
  R -- 一致する --> I{"!important が<br>付いた宣言がある?"}
  I -- ある --> I2["!important 同士で比べる"]
  I -- ない --> N["通常の宣言同士で比べる"]
  I2 --> IL{"インライン style?"}
  IL -- はい --> W1["インラインの !important が勝つ"]
  IL -- いいえ --> IY{"@layer の中にある?"}
  IY -- ある --> W2["先に宣言したレイヤーが勝つ<br>レイヤー内 > レイヤー外"]
  IY -- すべてレイヤー外 --> SP
  N --> NL{"インライン style?"}
  NL -- はい --> W3["インラインが勝つ"]
  NL -- いいえ --> NY{"@layer が違う?"}
  NY -- 違う --> W4["レイヤー外 > 後のレイヤー > 先のレイヤー"]
  NY -- 同じ --> SP{"詳細度 A-B-C が違う?"}
  SP -- 違う --> W5["詳細度が高いほうが勝つ"]
  SP -- 同じ --> SC{"@scope の根元までの<br>近さが違う?"}
  SC -- 違う --> W6["近いほうが勝つ"]
  SC -- 同じ --> W7["後に書いたほうが勝つ"]

全体の強さを1本の列に並べると、次のようになります（上ほど強い）。

3〜5と7〜9のそれぞれの中で、さらに「詳細度 → @scope の近さ → 書いた順番」で比べます。 大事なのは、詳細度がどれだけ高くても、上の段階（重要度・インライン・レイヤー）で差がついていれば逆転しない、という点です。

実測：段階ごとの勝ち負け

次のHTMLに対して、2つのルールの色を red と blue にして、どちらが採用されるかを確かめました。

<div id="wrap" class="wrap">
  <p id="t" class="a b" data-x="1">text</p>
</div>

詳細度の数え方と比べ方

桁をまたいで繰り上がらない

詳細度は左の桁から順に比べます。 クラスをいくつ重ねても、ID 1つには届きません。

「ID は100点、クラスは10点、タイプは1点」という覚え方は、桁が繰り上がらない点だけ補って使うと便利です。クラス10個（0-10-0）は ID 1個（1-0-0）に届かない、と覚えておけば十分です。

:is()・:not()・:has()・:where() の詳細度

この4つは、かっこの中にセレクタを書ける疑似クラスです。自分自身は数えず、引数の詳細度だけが反映されるのが共通のルールで、:where() だけは常に0になります。

:is(#x, p) は、p 要素に当たる場合でも詳細度が 1-0-0 になります。 セレクタをまとめる目的で :is() に ID を混ぜると、思ったより強いルールができあがるので、まとめるだけなら :where() のほうが扱いやすい場面があります。

CSSネスト（入れ子）も :is() と同じ扱いです。.a, #zz { & span { color: red } } は :is(.a, #zz) span と同じ意味になり、詳細度は 1-0-1 です。実測でも、後に書いた .a.b span { color: blue }（0-2-1）より優先されて red になりました。

!importantの仕組み

!important は、宣言の値の後ろに付けて「重要度」を上げる目印です。

.note { color: red !important; }

押さえておきたい性質は4つです。

• プロパティ1つずつに付く。 ルール全体ではなく、その1行だけが強くなります。
• !important 同士の勝負は、ふつうの詳細度 → 順番で決まる。 付ければ必ず勝つ、という印ではありません。
• @layer の中では順番が逆になる。 通常はレイヤー外が強いのに対し、!important ではレイヤー内（それも先に宣言したレイヤー）が強くなります。
• 継承には効かない。 親に付けた !important は、子が受け継ぐ値を強くはしません。

!importantを付けても上書きされない9つのケース

「!important を付けたのに変わらない」を、実際に再現して確かめました。期待は red、実際の結果が blue などになっているものが「効いていない」ケースです。

順に直し方を見ていきます。

1・2：相手も !important のとき

!important 同士では、通常と同じく詳細度と順番で決まります。相手の !important を外せるなら外すのがいちばんすっきりします。外せない場合（外部のCSSなど）は、同じ詳細度のセレクタを後ろに書くか、次の章の @layer を使います。

/* 直す前 */
.a { color: red !important; }
#t { color: blue !important; }   /* 詳細度 1-0-0 で勝つ */

/* 直した後：相手の !important を外せば、こちらは通常の宣言で足りる場合が多い */
#t { color: blue; }
.a { color: red !important; }    /* 重要度で勝つ → red */

3：インライン style や JavaScript が相手のとき

style="color: blue !important" は、スタイルシート側の !important より強くなります。JavaScript が書き込むインライン style も同じ扱いです。

スライダーやモーダルのライブラリがインライン style を書き込んでいる場合、CSS 側で上書きするには !important が必要になります。ライブラリ側にクラス名やCSS変数で見た目を変える設定がないかを先に確かめると、!important を使わずに済むことがあります。

4：@layer の中の !important が相手のとき

通常の宣言ではレイヤー外が勝ちますが、!important ではレイヤー内が勝ちます。

レイヤー内の !important を上書きしたいときは、それより先に宣言したレイヤーを用意して、そこに !important を書きます。

@layer override, vendor;                 /* override を先に宣言 */
@layer vendor   { p  { color: blue !important; } }
@layer override { p  { color: red  !important; } }   /* → red */

5・6・7：宣言そのものが届いていないとき

つづりや値に誤りがあると、ブラウザはその1行を読み飛ばします。エラー表示は出ないので、DevTools で確かめるのが近道です（次の章）。なお ! important のように ! の後ろに空白が入る書き方は有効で、実測でも red になりました。

8：親に付けた !important

!important は「その要素の、そのプロパティ」を強くするだけで、子へ渡る値を強くするわけではありません。 継承した値は、子に直接当たる宣言があれば、それがどんなに弱いセレクタでも負けます。

直すには、変えたい要素そのものに当たるセレクタで書きます。

/* 直す前 */  .wrap   { color: red !important; }
/* 直した後 */ .wrap a { color: red; }       /* または .wrap a { color: inherit; } */

9：カスタムプロパティに付けた !important

--c: red !important の !important は、変数 --c をめぐる勝負にだけ効きます。その変数を使う color: var(--c) の宣言は通常の重要度のままです。逆に、変数同士の勝負では効きます。.a { --c: red !important } と #t { --c: blue } があるとき、p { color: var(--c) } は red になりました。

補足：アニメーションとトランジション

• @keyframes の中に書いた !important は無視されます。 実測でも、keyframes 内の color: green !important は採用されず、#t { color: blue } の blue になりました。
• アニメーション再生中の値を止めたいときは、通常のルール側に !important を付けます。
• トランジションで変化している間は、その途中の値が最優先になります。transition: color 100s を付けた要素に !important の色を当てた直後は、まだ変化前の色のままでした。

DevToolsで打ち消し線から原因を特定する手順

Chrome DevTools の Elements パネルを使うと、どの宣言が採用され、どれが上書きされたかを確かめられます。以下は DevTools の一般的な操作手順で、画面の操作そのものは今回は未実行です（表示のもとになるデータは、次の項で実際に取得しています）。

打ち消し線が付いた宣言と、いちばん上で打ち消されていない宣言を見比べ、早見表の「判定の順番」を上から当てはめます。

Consoleで「当たっている宣言」を一覧にするスニペット

Styles タブと同じ情報を、プロパティを1つに絞って一覧にするスニペットです。#t と color を調べたい対象に書き換えて使います。

const el = document.querySelector('#t'), prop = 'color', rows = [];
const walk = (rules, ctx) => {
  for (const r of rules) {
    if (r instanceof CSSStyleRule) {
      if (el.matches(r.selectorText) && r.style.getPropertyValue(prop)) {
        rows.push({ selector: r.selectorText, value: r.style.getPropertyValue(prop),
                    important: r.style.getPropertyPriority(prop) === 'important', within: ctx });
      }
      if (r.cssRules?.length) walk(r.cssRules, ctx);
    } else if (r.cssRules) {
      walk(r.cssRules, (ctx + ' ' + r.cssText.split('{')[0].trim()).trim());
    }
  }
};
for (const s of document.styleSheets) { try { walk(s.cssRules, ''); } catch (e) {} }
console.table(rows);
console.log('採用された値:', getComputedStyle(el)[prop]);

次のCSSを当てたページで実行した結果です（Playwright から同じコードを実行。console.table の代わりに配列の中身を表にしています）。

p { color: black }
.a { color: blue }
.wrap .a { color: red !important }
#t { color: green }
@layer x { p.a { color: orange } }

採用された値は rgb(255, 0, 0)（red）でした。#t のほうが詳細度は高いのに、!important の付いた .wrap .a が勝っていることが一覧から読み取れます。別ドメインから読み込んだCSSは、ブラウザの制限で cssRules を読めないため、この一覧には出てきません（try で読み飛ばしています）。

詳細度を上げずに直す書き方

上書きしたいとき、セレクタを長くしたり !important を足したりすると、次に上書きする人がさらに強い指定を書くことになります。相手を弱くする、層の順番で勝つ、必要な分だけ上回る、という方向の直し方を5つ紹介します。いずれも red を blue に上書きできることを確かめました。

A. :where() で土台のスタイルを弱くしておく

共通部品やリセットのように「あとで上書きされる前提」のスタイルは、:where() で包んでおくと、利用する側はクラス1つで上書きできます。

/* 土台：詳細度 0-0-1（:where の中は数えない） */
:where(.article) a { color: blue; text-decoration: underline; }

/* 利用側：クラス1つ（0-1-0）で上書きできる */
.button { color: white; text-decoration: none; }

B・C. @layer で「層の順番」を先に決める

@layer は、CSSを層に分け、層の順番で優先度を決める仕組みです。同じ層の中でだけ詳細度が比べられ、層が違えば詳細度は見られません。

/* 1行目で順番を宣言する。後ろほど強い */
@layer reset, vendor, components, utilities;

@layer reset      { #main p { margin: 0; } }      /* ID を使っていても… */
@layer components { .lead   { margin: 1em 0; } }  /* 後の層のクラス1つが勝つ */

実測で確かめたレイヤーの性質をまとめます。

外部のCSSファイルを層に入れるときは、@import url("vendor.css") layer(vendor); と書きます（この @import の書き方は今回は未実行で、同じ内容を @layer vendor { ... } のブロックで確かめています）。自分のCSSをレイヤー外か後ろの層に置けば、外部CSSのセレクタがどれだけ長くても、短いセレクタで上書きできます。

D. カスタムプロパティで値だけを差し替える

部品側が var(--c, red) のように変数で値を受け取る形にしておくと、利用側はセレクタの強さを競わずに値を変えられます。変数は継承されるので、親やその要素自身のどこかで --c を定義すれば届きます。

@scope：範囲を区切り、近いほうを優先する

@scope は、ルールが効く範囲を「この要素の中だけ」と区切る仕組みです。MDNでは Baseline 2026（2026年3月から主要ブラウザの現行版で利用可能）と案内されています。

@scope (.card) to (.card__body) {   /* .card の中、ただし .card__body より内側は除く */
  p { color: red; }
}

カスケードでは、詳細度が同じときに「スコープの根元に近いほう」が勝つという段階が加わります。次のHTMLで確かめました。

<div class="card"><div class="note"><p id="t" class="a">t</p></div></div>

@scope の中のセレクタには、スコープの根元（.card）の詳細度は加算されません。@scope (#wrap) { p { ... } } の p は 0-0-1 のままで、実測でもスコープ外の .a に上書きされました。根元の詳細度も加えたいときは :scope p（0-1-1）と書きます。

!importantを使う場面の判断表

!important は、使いどころを決めておくと便利な道具です。

上書きされないときのチェックリスト

よくある質問

Q. !important とインライン style はどちらが強いですか？ A. スタイルシートの !important のほうが、通常のインライン style より強いです。ただし、インライン style 側にも !important が付いている場合はインラインが勝ちます。実測でも、.a { color: red !important } 対 style="color: blue" は red、#t { color: red !important } 対 style="color: blue !important" は blue でした。

Q. CSSファイルの読み込み順は優先順位に関係しますか？ A. 関係します。ただし見られるのは最後の段階で、重要度・インライン・レイヤー・詳細度がすべて同じときだけです。<style> を2つに分けた実測では、同じ .a 同士なら後の <style> が勝ち、1つ目が .a.b（詳細度が上）なら1つ目が勝ちました。

Q. :is() と :where() はどう使い分けますか？ A. セレクタをまとめる働きは同じで、詳細度が違います。:is() は引数の中でいちばん高い詳細度になり、:where() は常に 0-0-0 です。あとで上書きされる前提の土台のスタイルには :where()、いまの強さを保ちたいところには :is() が向いています。

Q. 詳細度を確認できるツールはありますか？ A. Chrome DevTools の Styles タブでセレクタにマウスを重ねると表示されます。この記事の表の値は、DevTools が使っているのと同じ仕組みから取得しました。

まとめ

• 優先順位は「重要度 → インライン → @layer → 詳細度 → @scope の近さ → 書いた順番」の順に判定され、上の段階で決まれば下は見られない。
• 詳細度は A-B-C の3桁で、左から比べる。 クラスを256個重ねても ID 1個には届かない。
• :is()・:not()・:has() は引数の最大の詳細度、:where() は常に0。
• !important 同士は、詳細度と順番で決まる。 インラインの !important と、@layer 内の !important はさらに強い。
• 親に付けた !important は子の直接指定に届かない。 変えたい要素に当たるセレクタで書く。
• 原因は DevTools の打ち消し線と、判定順の表を上から当てはめて特定する。
• 直すときは :where()・@layer・カスタムプロパティで、詳細度を上げずに解決する。

株式会社RJCでは、CSSの優先順位と詳細度の仕組みを仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。