CSS詳細度とは｜計算方法・優先順位・!important・詳細度を上げる/下げる方法

CSSを書いていて「指定したはずなのに効かない」と感じるときは、詳細度と優先順位が関係していることが多いです。

CSSは、同じ要素に複数のスタイルが当たった場合、どの指定を優先するかをルールに沿って決めます。

この記事では、CSSの詳細度を初心者向けに整理します。

• CSS詳細度とは何か
• ID、class、タグの優先順位
• 詳細度の計算方法
• !important とインラインスタイルの扱い
• 同じ詳細度なら後に書いたCSSが勝つ理由
• 詳細度を上げる方法、下げる方法
• :where()、:is()、:not() の注意点

CSS詳細度とは

CSS詳細度とは、どのCSSセレクタの指定を優先するかを決める強さのことです。

たとえば、次のHTMLがあるとします。

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

この要素に対して、次のように複数のCSSを書いた場合、どの色になるでしょうか。

p {
  color: blue;
}

.text {
  color: green;
}

#lead {
  color: red;
}

この場合は、#lead の red が適用されます。

IDセレクタは、classセレクタやタグセレクタより詳細度が高いためです。

CSSの優先順位の全体像

CSSの優先順位は、詳細度だけで決まるわけではありません。

ざっくり強い順に並べると、次のようになります。

1. !important が付いた指定
2. HTMLに直接書いたインラインスタイル
3. IDセレクタ
4. class、属性セレクタ、疑似クラス
5. タグセレクタ、疑似要素
6. 同じ強さなら後に書いたCSS

ただし、!important は便利に見えて後から直しにくくなるため、常用は避けた方がよいです。

詳細度の計算方法

詳細度は、よく A-B-C のような形で表されます。

分類	対象	例
A	IDセレクタ	#header
B	class、属性セレクタ、疑似クラス	.button、[type="text"]、:hover
C	タグセレクタ、疑似要素	p、a、::before

たとえば、次のように計算します。

セレクタ	詳細度	理由
p	0-0-1	タグが1つ
.text	0-1-0	classが1つ
#lead	1-0-0	IDが1つ
.article p	0-1-1	classが1つ、タグが1つ
#main .article p	1-1-1	ID、class、タグが1つずつ

数字を単純な足し算の点数として見るより、左から順番に比較すると考えるとわかりやすいです。

たとえば、1-0-0 は 0-100-100 より強いです。

IDが1つある時点で、classやタグをたくさん並べた指定より優先されます。

同じ詳細度なら後に書いたCSSが優先される

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

.button {
  color: blue;
}

.button {
  color: red;
}

この場合、どちらも .button なので詳細度は同じです。

後に書かれた color: red; が適用されます。

CSSファイルを複数読み込んでいる場合も、後から読み込まれたCSSが勝つことがあります。

WordPressテーマやプラグインのCSSを上書きしたいときは、読み込み順も確認しましょう。

インラインスタイルはかなり強い

HTMLの style 属性に直接書いたCSSは、通常のセレクタより強くなります。

<p class="text" style="color: red;">こんにちは</p>

.text {
  color: blue;
}

この場合は、インラインスタイルの red が優先されます。

インラインスタイルは上書きが難しくなるため、できるだけCSSファイル側にまとめるのがおすすめです。

!importantは最終手段にする

!important を付けると、その指定は通常の詳細度より強くなります。

.text {
  color: blue !important;
}

ただし、!important を多用すると、あとからさらに強い指定で上書きする必要が出てきます。

その結果、CSSが読みづらくなります。

!important を使う前に、次のことを確認しましょう。

• セレクタが対象の要素に当たっているか
• CSSの読み込み順が想定通りか
• 詳細度が負けていないか
• インラインスタイルで上書きされていないか
• ブラウザのキャッシュが残っていないか

どうしても外部ライブラリやプラグインのCSSを一時的に上書きしたい場合だけ、範囲を限定して使うのがよいです。

詳細度を上げる方法

CSSを上書きしたい場合は、対象を少し具体的にします。

.button {
  color: blue;
}

.article .button {
  color: red;
}

.article .button はclassが2つなので、.button より詳細度が高くなります。

ただし、必要以上に長いセレクタにしないことが大切です。

悪い例です。

body .page .content .article .section .button {
  color: red;
}

このように長くすると、あとから上書きしづらくなります。

詳細度を上げるときは、必要最小限にしましょう。

詳細度を下げる方法

保守しやすいCSSにするには、詳細度を低めに保つことも大切です。

よく使う方法は次のとおりです。

• IDセレクタをスタイル指定に使いすぎない
• セレクタを深くネストしすぎない
• class中心でスタイルを当てる
• :where() を使って詳細度を上げずに範囲指定する
• !important を減らす

たとえば、次のように :where() を使うと、範囲を指定しながら詳細度を低くできます。

:where(.article) a {
  color: #0066cc;
}

:where() の中のセレクタは詳細度が0として扱われます。

そのため、あとからclassで上書きしやすくなります。

:is()、:not()、:where()の詳細度

疑似クラスの中でも、:is()、:not()、:where() は詳細度の考え方に注意が必要です。

疑似クラス	詳細度の考え方
:is()	中に書いたセレクタのうち、最も高い詳細度が反映される
:not()	中に書いたセレクタの詳細度が反映される
:where()	中に何を書いても詳細度は0

たとえば、次のような指定は、#main の詳細度が効きます。

:is(#main, .content) a {
  color: red;
}

一方、:where() を使うと詳細度を低くできます。

:where(#main, .content) a {
  color: red;
}

テーマ全体のベーススタイルには :where()、特定部品の上書きにはclass、のように使い分けると管理しやすいです。

CSS詳細度の計算ツールについて

複雑なセレクタの詳細度を確認したい場合は、詳細度計算ツールを使うのも便利です。

ただし、ツールの数字だけを見るのではなく、次の点も一緒に確認しましょう。

• そのCSSが本当に読み込まれているか
• 後から別のCSSで上書きされていないか
• !important が付いていないか
• インラインスタイルがないか
• ブラウザの検証ツールで打ち消し線になっていないか

CSSが効かない原因は、詳細度だけではないこともあります。

ブラウザの検証ツールで対象要素を選び、どのCSSが適用され、どのCSSが打ち消されているかを見るのが一番確実です。

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

CSSが効かないときは、次の順番で確認すると迷いにくいです。

1. セレクタがHTMLの要素に合っているか確認する
2. CSSファイルが読み込まれているか確認する
3. ブラウザの検証ツールで打ち消されているCSSを見る
4. 詳細度で負けていないか確認する
5. 同じ詳細度なら読み込み順・記述順を確認する
6. インラインスタイルや !important を確認する

この流れで見ると、むやみに !important を増やさずに原因を見つけやすくなります。

まとめ

CSS詳細度は、複数のCSSが同じ要素に当たったとき、どの指定を優先するかを決める仕組みです。

この記事のポイントをまとめます。

• IDはclassより強く、classはタグより強い
• 詳細度は A-B-C のように左から比較する
• 同じ詳細度なら後に書いたCSSが優先される
• インラインスタイルと !important はかなり強い
• 上書きしたいときは必要最小限だけ詳細度を上げる
• 保守しやすくするには詳細度を低く保つ
• :where() は詳細度を上げずに範囲指定できる

詳細度を理解すると、CSSが効かない原因を落ち着いて切り分けられるようになります。

書籍でCSS設計を体系的に学びたい人へ

詳細度だけでなく、セレクタやモジュールを含むCSS設計全体を一冊で整理したい場合の購入候補です。この記事の確認手順はブラウザで試し、仕様の細部はMDNなどの最新リファレンスもあわせて参照してください。

以下のリンクはアフィリエイト広告(もしもアフィリエイト経由)です。価格・在庫・送料条件は変わるため、必ずリンク先で最新情報を確認してください。

関連記事

• CSS displayの使い方｜インライン・ブロック・display: contentsまで解説
• CSS flexの使い方｜横並び・中央寄せ・均等幅・折り返し・高さを揃える方法
• CSS Gridの使い方｜2列・レスポンシブ・repeat・grid-area・flexとの使い分け

参考リンク

• MDN：Specificity
• MDN：:where()
• MDN：:is()
• MDN：:not()