cssの適用優先度 - shou2017.com

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

セレクタの詳細度

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

CSSの詳細度、高い順。

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

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

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

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

css側

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

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

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

ex1)

html側

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

css側

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

ex2)

html側

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

css側

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