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つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
See Also