cssの適用優先度

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

セレクタの詳細度


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

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

CSSの詳細度、高い順。

  1. HTMLのstyle属性(style=“”) 直書き

  2. id(#sample)

  3. class(.sample)

    • 擬似クラス(:hover)
    • 属性([type]=“submit”)
  4. 要素型(div)、擬似要素(::before)

<div class="sample">sample text</div>
.sample { color: red; } ← こっちが適用される
div { color: blue; } 





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

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

<div class="red blue">sample text</div>
.blue { color: blue; }
.red { color: red; } ← 後から書かれたこっちが適用される

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



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

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

詳細の計算方法

ex1)

<div class="red blue">sample text</div>
div.blue { color: blue; } 0-0-1 + 0-1-0 = 0-1-1 ← こっちが適用される
.red { color: red; }      0-1-0 

ex2)

<div class="about" id="about">
</div>
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;
} 





See Also