CSS 詳細度

Volardev 編集部 April 12, 2026

1. 詳細度 (Specificity) とは？

同じ要素に対して複数の相反する CSS 宣言がある場合、ブラウザはどの宣言が最も要素に関連しているかを判断し、それを適用します。この判断基準となるのが詳細度（Specificity）です。

詳細度は、さまざまな種類の CSS セレクタで構成されるマッチング・ルールのようなものです。

すべての CSS セレクタには、詳細度の階層内での場所があります。4 つのカテゴリがあり、それぞれのレベルが異なる重みを持っています。

インラインスタイル (Inline styles): HTML 要素に直接記述されるスタイル（例：<h1 style="color: pink;">）。詳細度において最も強力です。
ID セレクタ (IDs): 特定の ID を持つ要素を選択します（例：#navbar）。
クラス、属性、擬似クラス (Classes, attributes and pseudo-classes): クラス（.container）、属性（[type="text"]）、擬似クラス（:hover）が含まれます。
要素と擬似要素 (Elements and pseudo-elements): 要素名（h1、div）や擬似要素（::before）が含まれます。

詳細度の計算方法を覚えるためのコツとして、「0, 0, 0, 0」という 4 つの桁で考える方法があります。

Note: ユニバーサルセレクタ（*）や結合子（+, >, ~）は詳細度に影響を与えません（0, 0, 0, 0）。

最も高い数値を持つセレクタが「勝利」し、そのスタイルが適用されます。

2 つのセレクタの詳細度が全く同じ場合、スタイルシートの中で最後に記述された CSS ルールが適用されます。

/* この場合、背景は青になります */
h1 { background-color: yellow; }
h1 { background-color: blue; }

ID セレクタは、どれだけ多くのクラスセレクタが並んでいても、それらより優先されます。

/* 背景は黄色になります。ID はクラスの集合より強いためです */
#content { background-color: yellow; }
.main .post .content { background-color: blue; }

特定の要素をターゲットにするセレクタは、汎用的な要素セレクタよりも詳細度が高くなります。

/* 背景は緑になります */
div p { background-color: green; } /* 0,0,0,2 */
p { background-color: red; }       /* 0,0,0,1 */

CSS 宣言で !important ルールが使用されると、この宣言は詳細度に関係なく他のすべての宣言を上書きします。

/* 背景は必ず赤になります */
#myElement {
  background-color: blue !important;
}

.myClass {
  background-color: red;
}

!important は詳細度の計算を完全に無視するため、デバッグが困難になります。どうしても必要な場合を除き、使用は避けるべきです。!important を使う代わりに、詳細度の高いセレクタ（ID など）を使用するか、CSS の構造を見直すことを検討してください。