CSS ・ CSSの記法
詳細度
どの指定が優先されるかの決まり
同じ要素に複数のCSSが当たったとき、どれが優先されるかを決める「強さ」の決まりです。セレクタの種類ごとに点数のように数えて比べます。
01
サンプルコード
HTML
1<p id="lead" class="text">この文字は何色になるでしょう？</p>
CSS
1/* 要素セレクタ：0-0-1 ≒ 1点 */
2p {
3 color: blue;
4}
5/* クラスセレクタ：0-1-0 ≒ 10点 */
6.text {
7 color: green;
8}
9/* idセレクタ：1-0-0 ≒ 100点 → これが勝つ */
10#lead {
11 color: #c0392b;
12}
02
実行結果
ブラウザでの表示#lead（id）の指定が最も強いため、文字は赤になります
03
解説
同じ要素に複数のスタイルが指定されたとき、ブラウザは「詳細度」が高いほうを使います。上の例では、p・.text・#lead の3つが同じ段落を指定していますが、最も詳細度が高い #lead の赤が使われます。
詳細度は、セレクタに含まれる「id」「クラス・属性・疑似クラス」「要素・疑似要素」の数を、それぞれ別の桁として数えます。インラインスタイル（style属性）はさらに上の桁です。目安として 1000点・100点・10点・1点 と考えると分かりやすくなります。
ただし点数は桁の比較なので、繰り上がりはありません。クラスを11個つなげても（0-11-0）、id 1つ（1-0-0）には勝てません。詳細度が同じときは、CSSの中で後に書いたほうが優先されます。
04
応用例・注意点
詳細度の目安
| セレクタの種類 | 説明 |
|---|---|
インラインスタイル（style 属性） | 1-0-0-0 ≒ 1000点 |
id セレクタ（#id） | 1-0-0 ≒ 100点 |
クラス・属性セレクタ・疑似クラス（.class / [type] / :hover） | 0-1-0 ≒ 10点 |
要素・疑似要素（p / ::before） | 0-0-1 ≒ 1点 |
*（ユニバーサルセレクタ） | 0点 |
!important | 詳細度に関係なく最優先（多用しない） |
セレクタの詳細度を数える
セレクタに含まれる種類ごとに数えて、左の桁から比べます。
CSS
1/* 0-0-1 ≒ 1点 */
2li { }
3/* 0-0-2 ≒ 2点 */
4ul li { }
5/* 0-1-1 ≒ 11点 */
6li.active { }
7/* 0-2-1 ≒ 21点 */
8.menu li:hover { }
9/* 1-0-1 ≒ 101点 */
10#nav li { }
詳細度を上げずに上書きする
上書きできないときは、詳細度を上げるより、後に書く・クラスを1つ足す程度にとどめます。id や !important に頼るとさらに上書きしにくくなります。
CSS
1/* △ 上書きのために強くしすぎない */
2#main .content .box p { }
3
4/* ○ クラス1つで指定し、後に書く */
5.box-text { }
注意点
- 01!important はどんな詳細度にも勝ってしまうため、使うと後から上書きできなくなります。最終手段にとどめます。
- 02継承された値（親から引き継いだ color など）は、詳細度に関係なく、直接指定したスタイルに負けます。
- 03詳細度を低く・そろえておくと、CSSが上書きしやすく管理しやすくなります。スタイルは基本的にクラスで指定するのがおすすめです。