はじめに
CSS（Cascading Style Sheets）には、複数のスタイルが適用される要素がある場合、どのスタイルを優先して適用するかを決定する「優先度（Specificity）」のルールがあります。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
CSSの記述方法によっては、思った通りのデザインにならないことがあります。特に、異なるセレクタが同じ要素に適用されたときに、どのスタイルが優先されるのかを理解することは重要です。
書こうと思ったきっかけ
あるプロジェクトでCSSのスタイルが思ったように適用されず、デザインが崩れる問題が発生しました。
調べてみると、CSSの優先度（Specificity）によって期待とは異なるスタイルが適用されていたのが原因でした。
この経験を踏まえ、CSSの優先度の仕組みを分かりやすくまとめておこうと思い、この記事を書きました。
CSSの優先度とは？
CSSには、スタイルの競合を解決するための優先度（Specificity）というルールがあります。
今回は以下のCSSを例に、優先度の考え方を解説します。
<style>
img {
width: 600px;
}
.cats {
width: 200px;
}
#my_cat {
width: 50px;
}
</style>
セレクタの優先度
CSSのセレクタは、以下のルールに基づいて優先度が決まります。
-
IDセレクタ (
#id) → 優先度 100 -
クラスセレクタ (
.class)、属性セレクタ ([attr]) → 優先度 10 -
タグセレクタ (
element) → 優先度 1
上記のルールに基づき、CSSの優先度を比較すると、以下の順番になります。
| セレクタ | 優先度 | 適用されるスタイル |
|---|---|---|
#my_cat { width: 50px; } |
100 | IDセレクタが最優先 |
.cats { width: 200px; } |
10 | クラスセレクタ |
img { width: 600px; } |
1 | タグセレクタ |
実際に適用されるスタイル
以下のようなHTMLがある場合、各画像の width の値はどうなるでしょうか？
<img src="cat1.jpg" alt="Cat 1">
<img class="cats" src="cat2.jpg" alt="Cat 2">
<img id="my_cat" class="cats" src="cat3.jpg" alt="Cat 3">
各要素への適用結果
-
<img src="cat1.jpg">→width: 600px;（imgタグのデフォルトスタイルが適用） -
<img class="cats" src="cat2.jpg">→width: 200px;（クラスセレクタ.catsがimgタグの600pxを上書き） -
<img id="my_cat" class="cats" src="cat3.jpg">→width: 50px;（IDセレクタ#my_catが.catsの200pxを上書き）
まとめ
- 優先度のルール → IDセレクタ > クラスセレクタ > タグセレクタ
-
具体的な優先度の数値 →
#id (100) > .class (10) > element (1) - より優先度の高いスタイルが適用される
CSSを記述する際には、どのスタイルが適用されるかをしっかり理解し、意図したデザインが反映されるように設計してみてください！