CSSのスタイル優先度を総まとめ

cssを編集している時に思ったとおりに適応されていないと思ったら、スタイルの適応優先度をよくわかっていなかったので総まとめです。

id属性 > class属性

id属性とclass属性ではid属性が優先されます。

html

<p id="a" class="b">red</p>
<p class="b">blue</p>
<p>green</p>

css

p#a { background: red;}
p.b { background: blue;}
p { background: green; }

style属性に記述 > id属性

タグ内にstyle属性を付与して直打ちするとid属性よりも優先度が高まります。

html

<p id="a" style="background: red;">red</p>
<p id="a">blue</p>

css

p#a {background: blue; }

!importantを最後につけると優先度が一番高くなります

cssのプロパティの最後に「!important」をつけると優先度が一番になります。

html

<p style="background: red">brown</p>
<p id="a">brown</p>
<p class="b">brown</p>

css

p {background: brown !important;}
p#a {background: blue;}
p.b {background: yellow;}