CSSの優先順位
CSSの指定場所による優先順位以外にも優先順位はあります。CSSは先に記述したものより後に記述した方が優先順位が高くなり「上書き」と「継承」が行われます。外部CSSを使う場合でも、この優先順位を理解しておく必要があります。
ケース1：外部CSSのリンクは後に書いた方が優先順位が高い
<link rel="stylesheet" src="reset.css">
<link rel="stylesheet" src="style.css"><!-- 優先順位が高い -->
ケース2：セレクタが同じ場合は後に書いたほうが優先順位が高い
p{
margin-bottom: 30px;
color: #000000;
}
p{
color: #333333;
}
/* この場合は下記の指定と同じ
p{
margin-bottom: 30px;
color: #333333;
}
*/
ケース3：セレクタ内に同じプロパティがある場合は後に書いた方が優先順位が高い
p{
margin-bottom: 30px;
margin-bottom: 10px;
}
/* この場合は、下記の指定と同じ
p{
margin-bottom: 10px;
}
*/
セレクタの指定による優先順位の違い
セレクタには点数があります。点数が高いほうが優先順位が高くなります。これは後に記述するよりも優先されます。点数は下記の表になります。
| 全称セレクタ | 要素セレクタ | Classセレクタ | IDセレクタ |
|---|---|---|---|
| 0 | 1 | 10 | 100 |
子孫セレクタ、子セレクタは指定したIDセレクタ、Classセレクタ、要素セレクタの点数の合計になります。「.sec p」の場合は「11点」。「#wrap p」の場合は「101点」となります。
CSSで設計するときのポイント
ポイントはセレクタの点数をできるだけ均一に設定することです。点数の差を少なくすれば優先順位を把握しやすくなり、CSSの継承、上書きがしやすくなります。
方法としては、
要素にどんなCSSが適用されているかを確認する方法としてはブラウザの機能である「開発ツール」を使うとCSSの適用状態が確認できます。
※Google Chromeは「デベロッパーツール」という名前です。他のブラウザにも同じような機能がありますがツールの機能の豊富さでデベロッパーツールがよく使われています。
デベロッパーツールの表示はブラウザでWEBページを開いた状態でF12（Windows）また、Command + Option + i（Mac）で起動します。
まとめ
- CSSの優先順は後に指定したほうが高い
- セレクタによる優先順位の違いは点数
- 設計しやすくするためにClassセレクタを使用し子孫セレクタ、子セレクタの数は必要最低限で指定する