CSSの詳細度（Specificity）とは？優先順位の仕組みを解説
CSSを書いていると、「同じ要素に複数のスタイルを書いたのに、思った通りに反映されない」という場面があります。
その原因のひとつが、CSSの詳細度です。
CSSでは、複数のスタイルが同じ要素に当たった場合、どのスタイルを優先するかがルールによって決まります。この優先順位の仕組みを理解しておくと、無理に!importantを使わず、管理しやすいCSSを書きやすくなります。
この記事では、CSSの詳細度の意味、計算方法、優先順位の考え方、実務で注意したいポイントを初心者向けに解説します。
Contents
CSSの詳細度とは
CSSの詳細度とは、セレクタがどれだけ具体的に要素を指定しているかを表す仕組みです。
たとえば、次のようなCSSがあるとします。
/* style.css */
p {
color: blue;
}
.text {
color: red;
}HTMLが次のような場合、文字色は赤になります。
<!-- index.html -->
<p class="text">CSSの詳細度を学習します。</p>これは、pよりも.textの方が詳細度が高いからです。
pは「すべてのp要素」を指定しています。一方、.textは「textというクラスを持つ要素」を指定しています。そのため、より具体的な.textのスタイルが優先されます。
CSSセレクタの基本については、関連記事「CSSセレクタとは？種類と使い方をわかりやすく解説」でも詳しく解説しています。
CSSでスタイルが適用される優先順位
CSSの優先順位は、基本的に次の順番で決まります。
!important- インラインスタイル
- 詳細度が高いセレクタ
- 後に書かれたスタイル
通常のCSSでは、まず詳細度が重要になります。ただし、詳細度が同じ場合は、後に書かれたCSSが優先されます。
詳細度の基本的な考え方
CSSの詳細度は、セレクタの種類によって強さが変わります。
主な強さの順番は、次の通りです。
| セレクタの種類 | 例 | 詳細度 |
|---|---|---|
| インラインスタイル | style="" | 非常に高い |
| IDセレクタ | #header | 高い |
| クラスセレクタ | .button | 中程度 |
| 属性セレクタ | [type="text"] | 中程度 |
| 疑似クラス | :hover | 中程度 |
| 要素セレクタ | p | 低い |
| 疑似要素 | ::before | 低い |
| 全称セレクタ | * | ほぼ影響なし |
ポイントは、IDセレクタはクラスセレクタよりも強く、クラスセレクタは要素セレクタよりも強いということです。
詳細度の計算方法
CSSの詳細度は、一般的に次のような形で考えられます。
インラインスタイル - ID - クラス・属性・疑似クラス - 要素・疑似要素たとえば、次のように考えます。
| セレクタ | 詳細度のイメージ |
|---|---|
p | 0-0-0-1 |
.text | 0-0-1-0 |
#main | 0-1-0-0 |
section .text | 0-0-1-1 |
#main .text | 0-1-1-0 |
数値が大きいほど優先されるのではなく、左側から順番に比較される点が重要です。
たとえば、クラスセレクタをたくさん重ねても、IDセレクタ1つの詳細度には基本的に勝てません。
要素セレクタよりクラスセレクタが優先される例
次のコードでは、pと.textの両方が同じ要素に当たっています。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの詳細度</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="text">この文字は赤色になります。</p>
</body>
</html>/* style.css */
p {
color: blue;
}
.text {
color: red;
}この場合、.textの方が詳細度が高いため、文字色は赤になります。
要素セレクタは広い範囲にスタイルを当てるときに便利ですが、個別のデザイン指定ではクラスセレクタの方がよく使われます。
後に書いたCSSが優先される場合
詳細度が同じ場合は、後に書かれたCSSが優先されます。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの優先順位</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="text">この文字は緑色になります。</p>
</body>
</html>/* style.css */
.text {
color: red;
}
.text {
color: green;
}どちらも.textなので詳細度は同じです。そのため、後に書かれたcolor: green;が優先されます。
CSSで「後に書いた方が勝つ」と言われるのは、詳細度が同じ場合の話です。詳細度が違う場合は、後に書いても負けることがあります。
IDセレクタはクラスセレクタより強い
IDセレクタは、クラスセレクタよりも詳細度が高くなります。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IDセレクタの詳細度</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="message" class="text">この文字は青色になります。</p>
</body>
</html>/* style.css */
.text {
color: red;
}
#message {
color: blue;
}CSS設計については、関連記事「CSS設計とは？保守しやすいスタイルを書く基本を解説」でも解説しています。
この場合、.textよりも#messageの方が詳細度が高いため、文字色は青になります。
ただし、IDセレクタは詳細度が高すぎるため、後から上書きしにくくなることがあります。保守しやすいCSSを書く場合は、クラスセレクタを中心に設計するのが一般的です。
複数のセレクタを組み合わせた場合
セレクタを組み合わせると、詳細度は加算されます。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複合セレクタの詳細度</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main">
<p class="text">この文字はオレンジ色になります。</p>
</main>
</body>
</html>/* style.css */
.text {
color: red;
}
.main .text {
color: orange;
}.textはクラスセレクタ1つです。一方、.main .textはクラスセレクタが2つあります。
そのため、.main .textの方が詳細度が高くなり、文字色はオレンジになります。
ただし、セレクタを深くしすぎると、CSSが複雑になりやすくなります。
/* style.css */
body main section article .content .text {
color: red;
}このような指定は詳細度が高くなりすぎるため、後から修正しにくいCSSになりがちです。
インラインスタイルは通常のCSSより強い
HTMLのstyle属性に直接書くインラインスタイルは、通常のCSSよりも強くなります。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインスタイル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="text" style="color: purple;">この文字は紫色になります。</p>
</body>
</html>/* style.css */
.text {
color: red;
}この場合、CSSファイル側では赤色を指定していますが、インラインスタイルのcolor: purple;が優先されます。
インラインスタイルは一時的な確認には便利ですが、HTMLとCSSの役割が混ざるため、通常のWeb制作では多用しない方が管理しやすくなります。
!importantは最優先に近いが多用しない
!importantを使うと、通常の詳細度よりも優先されます。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>importantの例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="message" class="text">この文字は赤色になります。</p>
</body>
</html>/* style.css */
#message {
color: blue;
}
.text {
color: red !important;
}通常であれば、IDセレクタの#messageが優先されます。しかし、.textに!importantが付いているため、文字色は赤になります。
ただし、!importantを多用すると、どのスタイルが優先されるのか分かりにくくなります。結果として、さらに強い指定や別の!importantで上書きする必要が出てくることがあります。
基本的には、詳細度を整理して解決する方が望ましいです。
詳細度でよくあるつまずき
CSSの詳細度では、次のようなつまずきがよくあります。
クラスを指定しているのに反映されない
クラスを指定しているのに反映されない場合、より詳細度の高いセレクタが別の場所に書かれている可能性があります。
/* style.css */
.card .text {
color: blue;
}
.text {
color: red;
}この場合、.textは後に書かれていますが、.card .textの方が詳細度が高いため、条件に合う要素では青色が優先されます。
IDセレクタを使っていて上書きできない
IDセレクタを多用すると、後からクラスで上書きしにくくなります。
/* style.css */
#header .nav {
color: blue;
}
.nav {
color: red;
}この場合、.navを後に書いても、#header .navの詳細度が高いため上書きできません。
このような状態を避けるためには、最初からクラス中心でCSSを書くことが大切です。
セレクタを深く書きすぎている
次のようにセレクタを深く書きすぎると、詳細度が高くなりすぎます。
/* style.css */
.wrapper .main .section .card .card__title {
font-size: 24px;
}後から.card__titleだけで上書きしようとしても、詳細度が足りない場合があります。
BEMのような命名規則を使うと、セレクタを深くしすぎず、クラス単位で管理しやすくなります。
BEMについては、関連記事「BEMとは？CSS設計でよく使われる命名規則を解説」で詳しく解説しています。
詳細度を高くしすぎない書き方
保守しやすいCSSを書くためには、詳細度を必要以上に高くしないことが大切です。
基本的には、次のような方針が有効です。
| 方針 | 理由 |
|---|---|
| クラスセレクタを中心に書く | 上書きしやすく管理しやすい |
| IDセレクタを装飾目的で多用しない | 詳細度が高くなりすぎる |
| セレクタを深くしすぎない | 後から修正しにくくなる |
!importantをなるべく使わない | 優先順位が分かりにくくなる |
| 同じ役割のCSSを近くにまとめる | 管理しやすくなる |
特に、次のようにクラス単体で指定する形は、シンプルで扱いやすいです。
/* style.css */
.card {
padding: 24px;
border: 1px solid #ddd;
}
.card__title {
font-size: 24px;
font-weight: bold;
}
.card__text {
line-height: 1.8;
}このように書くと、どの要素にどのスタイルが当たるのか分かりやすくなります。
詳細度を確認するときの考え方
CSSが思った通りに反映されない場合は、次の順番で確認すると原因を見つけやすくなります。
- CSSファイルが正しく読み込まれているか
- セレクタ名に間違いがないか
- より詳細度の高いセレクタがないか
- 後に同じプロパティが書かれていないか
- インラインスタイルが指定されていないか
!importantが使われていないか
ブラウザの検証ツールを使うと、どのCSSが適用され、どのCSSが打ち消されているかを確認できます。
打ち消されているCSSには取り消し線が表示されるため、詳細度の確認に役立ちます。
CSSの詳細度を理解するメリット
CSSの詳細度を理解すると、次のようなメリットがあります。
| メリット | 内容 |
|---|---|
| スタイルの上書きがしやすくなる | どの指定が優先されるか判断しやすくなる |
!importantに頼らなくなる | CSSが整理されやすくなる |
| 修正時のトラブルが減る | 思わぬ上書きを防ぎやすくなる |
| CSS設計がしやすくなる | クラス中心の設計に役立つ |
| チーム開発でも読みやすくなる | ルールが分かりやすくなる |
CSSは書き足すほど複雑になりやすい言語です。詳細度を意識しておくことで、後から見ても理解しやすいCSSに近づけることができます。
まとめ
CSSの詳細度とは、セレクタがどれだけ具体的に要素を指定しているかを表す仕組みです。
同じ要素に複数のCSSが当たった場合、詳細度の高いスタイルが優先されます。詳細度が同じ場合は、後に書かれたCSSが優先されます。
基本的な優先順位は、次のように整理できます。
| 優先度 | 内容 |
|---|---|
| 高い | !important |
| 高い | インラインスタイル |
| 高い | IDセレクタ |
| 中程度 | クラスセレクタ・属性セレクタ・疑似クラス |
| 低い | 要素セレクタ・疑似要素 |
| 低い | 全称セレクタ |
ただし、!importantやIDセレクタを多用すると、後から修正しにくいCSSになることがあります。
保守しやすいCSSを書くためには、クラスセレクタを中心に、詳細度を高くしすぎない設計が大切です。詳細度を理解しておくことで、CSSの上書きトラブルを減らし、管理しやすいスタイルを書けるようになります。