bokunonikki.net

cssの適用優先度

Fri May 17, 2019
Wed Jun 9, 2021
css

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

セレクタの詳細度

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

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

CSSの詳細度、高い順。

  1. HTMLのstyle属性(style="") 直書き
  2. id(#sample)
  3. class(.sample)
    • 擬似クラス(:hover)
    • 属性([type]=“submit”)
  4. 要素型(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つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方