もう迷わない！CSSセレクタの優先順位（詳細度）を徹底解説【初心者向け】
「CSSを書いたのにスタイルが効かない！」「意図しない色が適用されてしまう…」
HTML/CSSの学習を始めたばかりの頃、多くの人がこのような壁にぶつかります。その原因のほとんどは、CSSセレクタの「詳細度（Specificity）」というルールを理解していないことにあります。
この記事では、CSSの優先順位を決める「詳細度」について、どこよりも分かりやすく解説します。この記事を読めば、なぜそのスタイルが適用されるのかが明確になり、CSSを自由自在にコントロールできるようになります。
CSSの「詳細度」とは？
詳細度とは、どのCSSスタイルを優先して適用するかを決めるための「点数」のようなものです。ブラウザは、一つのHTML要素に対して複数のCSSルールが指定されていた場合、この「詳細度の点数」が最も高いものを採用します。
この点数のルールは非常にシンプルです。「より具体的に要素を指定しているセレクタほど点数が高い」と覚えておきましょう。
詳細度の計算ルール – 4つのレベルで覚えよう！
詳細度の点数は、大きく分けて4つのレベルで計算されます。左側にあるほど優先度が高くなります。
(インラインスタイル, ID, クラス・属性・疑似クラス, 要素・疑似要素)
それでは、それぞれのレベルを具体的に見ていきましょう。
| 優先度 | 種類 | セレクタの例 | 点数イメージ |
|---|---|---|---|
| 最高 | インラインスタイル | <p style="color: red;"> |
1-0-0-0 |
| 高い | IDセレクタ | #header |
0-1-0-0 |
| 中くらい | クラス, 属性, 疑似クラス | .text, [type="text"], :hover |
0-0-1-0 |
| 低い | 要素, 疑似要素 | p, ::before |
0-0-0-1 |
レベル1: インラインスタイル (1-0-0-0)
HTML要素のstyle属性に直接書き込むスタイルです。これが最も優先度が高く、他のほとんどのスタイルを上書きします。
HTML
<!-- このp要素は、他のCSS指定があっても赤色になる --> <p style="color: red;">インラインスタイルで指定</p>
レベル2: IDセレクタ (0-1-0-0)
#で指定するIDセレクタです。IDはページ内で一意であるため、非常に強力な指定方法です。
CSS
/* IDが"title"の要素は青色になる */ #title { color: blue; }
レベル3: クラス・属性・疑似クラスセレクタ (0-0-1-0)
.で指定するクラスセレクタ、[ ]で指定する属性セレクタ、:で始まる疑似クラス（例: :hover）がこのレベルです。Web制作で最もよく使われるセレクタ群です。
CSS
/* "intro"クラスを持つ要素は緑色になる */ .intro { color: green; } /* typeが"submit"のinput要素の背景色を変える */ input[type="submit"] { background-color: orange; } /* リンクにマウスを乗せると下線が付く */ a:hover { text-decoration: underline; }
レベル4: 要素・疑似要素セレクタ (0-0-0-1)
pやdivといったHTMLタグ名で指定する要素セレクタと、::beforeや::afterといった疑似要素が最も低いレベルです。ベースのスタイルを指定するのによく使われます。
CSS
/* すべてのp要素は文字サイズが16pxになる */ p { font-size: 16px; } /* p要素の前に「※」を追加する */ p::before { content: "※ "; }
実践！詳細度を計算してみよう
セレクタが組み合わさっている場合、それぞれの点数を足し算して計算します。ただし、低いレベルの点数がいくら高くても、より高いレベルの点数には勝てません。（例：0-0-1-11 は 0-1-0-0 には勝てない）
例1: #nav .link vs div a
HTML
<div id="nav"> <a href="#" class="link">メニュー</a> </div>
CSS
#nav .link { /* ID(1) + クラス(1) = 0-1-1-0 */ color: red; } div a { /* 要素(1) + 要素(1) = 0-0-0-2 */ color: blue; }
結果: #nav .link の詳細度（0-1-1-0）の方が div a（0-0-0-2）よりも高いため、文字は赤色になります。
例2: p.text vs p
HTML
<p class="text">このテキストの色は？</p>
CSS
p.text { /* 要素(1) + クラス(1) = 0-0-1-1 */ color: green; } p { /* 要素(1) = 0-0-0-1 */ color: gray; }
結果: p.text の詳細度（0-0-1-1）の方が高いため、文字は緑色になります。
知っておくべき特別なルール
最終兵器！ !important
どんな詳細度の計算も無視して、スタイルを最優先で適用させるための記述が!importantです。
CSS
p { color: black !important; /* 何があってもこの色が最優先される */ }
注意！
!importantは非常に強力で便利な反面、多用するとスタイルの管理が非常に困難になります。どこで何が指定されているか分からなくなり、結局!importantを上書きするために別の!importantを使う…という悪循環に陥りがちです。どうしても上書きできない時の最終手段として使いましょう。
詳細度に影響しないセレクタ
全称セレクタ (*) や、子孫セレクタ (>)、隣接セレクタ (+) などの結合子は、詳細度の計算には含まれません（0点扱いです）。
CSS
/* どちらも詳細度は 0-0-1-1 */ div.main p { ... } div.main > p { ... }
同じ詳細度の場合は「後勝ち」
もし詳細度が全く同じだった場合は、CSSファイル内でより後（下）に書かれているスタイルが適用されます。これは「後勝ちの法則」とも呼ばれます。
CSS
.text { color: blue; } /* 詳細度: 0-0-1-0 */ .text { color: red; } /* こちらが適用される。詳細度が同じなので後勝ち */
まとめ：迷ったら「具体的か？」で考えよう！
CSSの詳細度は、一見複雑に見えるかもしれませんが、基本は「より具体的に、限定的に指定している方が強い」というシンプルな原則です。
- インラインスタイル (最強)
- IDセレクタ (とても強い)
- クラス・属性・疑似クラス (よく使う強さ)
- 要素セレクタ (一番弱い)
この優先順位を頭に入れておけば、「なぜかCSSが効かない…」と悩む時間がぐっと減り、よりスムーズにコーディングを進められるはずです。
もし迷ったら、ブラウザのデベロッパーツール（検証機能）で要素を調べてみるのがおすすめです。どのスタイルが適用され、どのスタイルが打ち消されているのかが一目で分かりますよ。
[参考ページ]
詳細度 – CSS: カスケーディングスタイルシート | MDN
関連記事
【CSS入門】Webページに背景画像を設置する方法 | 基本から応用まで徹底解説
CSSでWebページの背景に画像を設置する方法を解説します。background-imageの基本から、繰り返し、サイズ、位置、スクロール固定、複数画像の設定まで、初心者向けにコード例を交えて詳しく紹介。サイトデザインに背景画像を活用しましょう。
HTML要素をCSSで中央寄せする３つの方法
今回はCSSのdisplay: grid;、display: flex;、position: absolute;の３つのプロパティを使ってHTML要素を中央に配置させる方法について紹介していきます。それぞれの方法ごとに画像を中央に配置する場合と、テキストを中央に配置する場合とについて例を挙げながら紹介していきます。
CSSでテキストに下線を引く3つの方法
テキストに蛍光ペンで引いたマーカーのようなアンダーラインを引きたい時に使用できる方法について調べたので、CSSでテキストに下線を引く時に使える3つの方法についてそれぞれまとめて紹介していきたいと思います。 それぞれの方法ごとに出来ることできないことがあったりしますので、それぞれの特徴についてもまとめておきます。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す