cssの適用優先度

cssが適用される優先度はセレクタの詳細度で決まる。

セレクタの詳細度

セレクタの詳細度に優劣がある場合

cssの要素が競合した時の優先度。よりCSSの詳細度が高い順に適用される。

CSSの詳細度、高い順。

HTMLのstyle属性(style="") 直書き
id(#sample)
class(.sample)
- 擬似クラス(:hover)
- 属性([type]=“submit”)
要素型(div)、擬似要素(::before)

1
<div class="sample">sample text</div>

1
2
.sample { color: red; } ← こっちが適用される
div { color: blue; } 

セレクタの詳細度が同列の場合

競合するスタイルの詳細度が同じである場合、後に書かれたものが優先される。

1
<div class="red blue">sample text</div>

css側

1
2
.blue { color: blue; }
.red { color: red; } ← 後から書かれたこっちが適用される

影響するのはcssの定義であって、htmlでのクラスの順番ではないことに注意。

セレクタの詳細度が複数にまたがる場合

指定が複数重なると、詳細度も増えていく。セレクタが複数ある場合は足して計算する。

詳細の計算方法

ex1)

html側

1
<div class="red blue">sample text</div>

css側

1
2
div.blue { color: blue; } 0-0-1 + 0-1-0 = 0-1-1 ← こっちが適用される
.red { color: red; }      0-1-0 

ex2)

html側

1
2
<div class="about" id="about">
</div>

css側

1
2
3
4
5
6
7
8
0-0-1 + 0-1-0 = 0-1-1
div.about {
    background-color: black;
}
0-0-1 + 1-0-0 = 1-0-1 ← こっちが適用される
div#about {
    background-color: red;
} 

HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方

Amazon

楽天

Honto