【CSS】カスケードとは？優先順位・詳細度・上書きルールを初心者向けに解説

CSSを書いていると、「同じプロパティを書いたのに思った通りに反映されない」「後から書いたはずなのに上書きできない」と悩むことはありませんか？その原因の多くは、CSSのカスケードを理解できていないことです。CSSのカスケードは、競合するスタイルの中から「最終的にどのCSSを効かせるか」を決めるルールです。

この記事では、優先順位、詳細度、後勝ち、!important、カスケードレイヤーまで初心者向けに解説します。

CSSのカスケードとは？

カスケードとは、複数のCSSルールが同じ要素に適用されたときに、どの指定を採用するかを決める仕組みです。

<p class="text">こんにちは</p>

p {
  color: black;
}

.text {
  color: blue;
}

この場合、pにも.textにも当てはまりますが、最終的には.textのcolor: blue;が採用されます。

カスケードを理解するとCSSの効かない原因が見える

CSSが効かないとき、単に「書き方が間違っている」とは限りません。別のCSSに上書きされている、詳細度が負けている、インラインスタイルが勝っている、といった原因があります。

CSSの優先順位を決める主なルール

CSSの優先順位は、いくつかのルールで決まります。初心者がまず押さえるべきなのは、次の4つです。

ルール	意味	例
重要度	!importantなどがあるか	color: red !important;
詳細度	セレクタがどれだけ具体的か	ID > class > タグ
読み込み順	同じ強さなら後に書いた方が勝つ	下にあるCSSが優先
継承	親から受け継いだ値かどうか	colorなど

CSSは「後に書けば必ず勝つ」わけではありません。詳細度や重要度が高い指定の方が優先されます。

詳細度とは？ID・class・タグの強さ

詳細度とは、セレクタがどれだけ具体的かを示す考え方です。

p {
  color: black;
}

.text {
  color: blue;
}

#lead {
  color: red;
}

同じ要素にすべて当たる場合、基本的には#leadのようなIDセレクタが強くなります。

詳細度のざっくりした強さ

CSSは、どこに・どのように記述するか（セレクタの種類）によって「詳細度」という点数が決まり、点数が高い方が優先して適用されます。

書き方・セレクタ	特徴・初心者向けのイメージ	優先度
インラインスタイル (例:style="color: red;")	HTMLタグに直接書くスタイル。CSSファイルに書くよりも圧倒的に強い。	最高（最強）
idセレクタ (例:#main)	ページ内で1回しか使えない固有の目印。点数が高い。	高
classセレクタ (例:.text、:hover)	実務で一番よく使う、何回でも使い回せる目印。	中
タイプセレクタ (例:p、a)	タグ名そのものを指定する書き方。点数は一番低い。	低

同じ強さなら後に書いたCSSが勝つ

詳細度が同じ場合は、後に書いたCSSが優先されます。

.button {
  background-color: blue;
}

.button {
  background-color: green;
}

この場合、同じ.buttonなので、後に書かれたbackground-color: green;が採用されます。

CSSファイルの読み込み順も影響する

HTMLで複数のCSSファイルを読み込む場合も、後から読み込んだCSSが優先されやすくなります。

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">

この場合、同じ強さのセレクタであれば、theme.cssの指定がbase.cssを上書きします。

継承とは？親要素から値を受け継ぐ仕組み

CSSには、親要素に指定した値が子要素へ受け継がれるプロパティがあります。

body {
  color: #333;
  font-family: sans-serif;
}

このようにbodyに文字色やフォントを指定すると、基本的にはページ内の多くのテキストへ受け継がれます。

継承されるもの・されにくいもの

継承されやすい	継承されにくい
color	margin
font-family	padding
font-size	border
line-height	background-color

たとえば、bodyにmarginを指定しても、すべての子要素に同じmarginが継承されるわけではありません。

!importantは最後の手段として使う

!importantを付けると、その指定の重要度が上がります。

.button {
  color: red !important;
}

便利に見えますが、多用すると後から上書きしづらくなり、CSS全体が管理しにくくなります。

【注意】!important 同士がぶつかった場合はどうなる？

「どんなCSSよりも最優先される」と思われがちな !important ですが、実は!important同士がぶつかった場合は、通常のカスケードルール（詳細度・記述順）で勝敗が決まります。

/* クラスセレクタ（詳細度：高） */
.card .title {
  color: red !important;
}

/* タイプセレクタ（詳細度：低） */
.title {
  color: blue !important; /* ❌ !important同士なので詳細度で負ける */
}

上記のように、どちらにも !important がついている場合は、セレクタがより具体的な（詳細度が高い）.card .title の赤色が優先されます。また、詳細度まで全く同じであれば、「後に書かれた方が勝つ」という後勝ちルールが適用されます。

!importantを使う前に確認すること

• セレクタの詳細度が低すぎないか
• CSSファイルの読み込み順が正しいか
• インラインスタイルで上書きされていないか
• WordPressテーマやプラグインのCSSが後から読み込まれていないか

実務では、原因を調べずに!importantで押し切ると、別の場所でさらに強い指定が必要になる悪循環が起きやすくなります。

カスケードレイヤーとは？@layerで優先順位を整理する

近年のCSSでは、@layerを使ってCSSの優先順位をレイヤー単位で整理できます。

@layer reset, base, components;

@layer reset {
  button {
    all: unset;
  }
}

@layer base {
  body {
    font-family: sans-serif;
  }
}

@layer components {
  .button {
    display: inline-block;
    padding: 12px 24px;
  }
}

この例では、reset、base、componentsの順にレイヤーを定義しています。大規模なCSSでは、どの種類のCSSがどの順番で上書きされるかを明確にできます。

初心者はまず通常のカスケードを理解しよう

@layerは便利ですが、最初から無理に使う必要はありません。まずは、詳細度、読み込み順、継承、!importantの基本を押さえましょう。

CSSが効かないときの確認手順

CSSが思った通りに効かないときは、次の順番で確認すると原因を見つけやすくなります。

1. 検証ツールで打ち消されているCSSを見る

ブラウザの検証ツールを開くと、適用されているCSSと、打ち消されているCSSを確認できます。線で消されている指定は、別のCSSに負けています。

2. セレクタの詳細度を確認する

上書きしたいCSSよりも、既存CSSの方が詳細度が高い場合は、後に書いても負けることがあります。

#main .button {
  color: red;
}

.button {
  color: blue;
}

.main-button {
  color: red;
}

.main-button.is-active {
  color: blue;
}

IDに頼らずclassで状態を表すと、後から修正しやすくなります。

3. ショートハンドで上書きしていないか確認する

font、background、borderなどのショートハンドは、関連する値をまとめて上書きします。

.title {
  font-weight: 700;
  font: 16px/1.6 sans-serif;
}

この例では、あとから書いたfontによってfont-weightが意図せず初期化されることがあります。

WordPressテーマでCSSが効かないときのカスケード例

WordPressやCocoonなどのテーマをカスタマイズしていると、「追加CSSに書いたのに反映されない」ということがあります。この場合、テーマ側のCSSに詳細度や読み込み順で負けている可能性があります。

テーマ側のCSSが強いケース

たとえば、テーマ側で次のようなCSSが書かれているとします。

.article .entry-content a {
  color: #0068b7;
  text-decoration: underline;
}

一方で、追加CSSに次のように書いても、詳細度が低いため反映されないことがあります。

a {
  color: #e95420;
}

この場合、テーマ側の.article .entry-content aの方が具体的です。

.entry-content a.custom-link {
  color: #e95420;
}

HTML側でcustom-linkクラスを付けられるなら、対象を明確にしたclassで上書きする方が安全です。

WordPressの追加CSSが効かないときは、テーマCSSに詳細度で負けていないかを最初に確認しましょう。

読み込み順で負けるケース

CSSファイルの読み込み順でも結果は変わります。

<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="theme.css">

この順番では、同じ詳細度なら後から読み込まれるtheme.cssが勝ちます。自分のカスタムCSSを最後に読み込める構成にするか、子テーマや追加CSSの出力位置を確認しましょう。

詳細度を具体例で比較する

詳細度は慣れるまで分かりにくいですが、実際のコードで見ると判断しやすくなります。

セレクタ	強さの目安	コメント
p	低い	タグだけなので弱い
.text	中	classが1つある
.article .text	中〜高	classが2つある
#main .text	高い	IDがあるため強い
style="color:red;"	かなり高い	インラインスタイルは強い

classをつなげると詳細度が上がる

同じ要素に複数のclassが付いている場合、次のように書くと詳細度が上がります。

<a class="button button-primary">詳しく見る</a>

.button {
  background-color: #eeeeee;
}

.button.button-primary {
  background-color: #0068b7;
}

.button.button-primaryはclassが2つあるため、.buttonより強くなります。

詳細度を上げるためだけにclassを何個も重ねると、あとからさらに上書きしづらくなります。必要な範囲で使いましょう。

カスケードで起きる「上書き事故」の実例

CSSの上書き事故は、ショートハンドや共通クラスでよく起きます。

例1：backgroundで背景画像が消える

.hero {
  background-image: url("main.jpg");
  background-size: cover;
}

.hero.is-blue {
  background: #0068b7;
}

backgroundはショートハンドなので、背景色だけを指定したつもりでも、背景画像などをまとめて上書きすることがあります。

.hero.is-blue {
  background-color: #0068b7;
}

背景色だけを変えたいなら、background-colorを使う方が意図が明確です。

例2：共通クラスの後勝ちでボタン色が変わる

.button-primary {
  background-color: #0068b7;
}

.button {
  background-color: #eeeeee;
}

HTMLにbuttonとbutton-primaryの両方が付いている場合、詳細度が同じなら後に書かれた.buttonが勝つ可能性があります。

.button {
  background-color: #eeeeee;
}

.button-primary {
  background-color: #0068b7;
}

状態や種類を表すクラスは、共通クラスより後に書くと意図通りに上書きしやすくなります。

検証ツールでカスケードを確認する方法

CSSが効かないときは、ブラウザの検証ツールを見るのが最短です。

1. 対象の要素を右クリックして「検証」を開く
2. Styles欄で、打ち消し線が付いているCSSを探す
3. どのファイルの何行目から来ているCSSか確認する
4. 負けている理由が詳細度なのか、読み込み順なのかを判断する
5. 必要ならセレクタや読み込み順を調整する

検証ツールでは、実際に効いているCSSが上に表示され、負けているCSSには線が入ります。これを見るだけで、「自分のCSSがそもそも読み込まれていないのか」「読み込まれているが負けているのか」を切り分けられます。

初心者がやりがちな確認漏れ

• CSSファイルを保存していない
• ブラウザキャッシュが残っている
• 別のCSSファイルに同じセレクタがある
• HTML側のclass名が間違っている
• スマホ用のメディアクエリ内で上書きされている

カスケードを理解していても、保存忘れやclass名のミスで効かないことはよくあります。まずは検証ツールで「対象要素にCSSが届いているか」を見るのが実務の基本です。

カスケードを前提にしたCSS設計のコツ

カスケードは避けるものではなく、うまく使うものです。次のルールを意識すると、あとから修正しやすいCSSになります。

コツ	理由	例
IDでスタイルを書きすぎない	詳細度が高く上書きしづらい	#main .buttonより.main-button
共通CSSを先に書く	後から個別CSSで上書きしやすい	.buttonの後に.button-primary
ショートハンドに注意する	関連プロパティをまとめて上書きする	font、background、border
!importantを乱用しない	さらに強い指定が必要になる	原因調査後の最終手段にする

公式ドキュメントも確認する

カスケードはCSSの根本的な仕組みです。より正確に理解したい場合は、公式ドキュメントも参考にしてください。

• MDN Web Docs: Cascade
• MDN Web Docs: Specificity
• MDN Web Docs: @layer

まとめ：CSSのカスケードを理解すると上書きで迷いにくくなる

この記事では、CSSのカスケードについて解説しました。

カスケードは、重要度・詳細度・読み込み順・継承などをもとに、最終的に採用するCSSを決める仕組みです。CSSが効かないときは、まず検証ツールで打ち消されている指定を確認し、詳細度や読み込み順を見直しましょう。

!importantは便利ですが、原因を調べる前に使うとCSSの管理が難しくなります。まずはカスケードの基本を押さえて、上書きしやすいCSSを書いていきましょう。