解説
CSSは基本的には、後で定義されたものが優先されるが、セレクタの指定の仕方でも優先順位が変わってしまう。ここでは、明確に優先順位を決定するための仕組みを解説する。
更新日：2017年1月12日
点数表
| 指定方法 | 例 | 点数 |
|---|---|---|
| 全称セレクタ | * | 0 |
| タイプセレクタ | p, div等のHTMLタグ | 1 |
| 擬似要素 | :first-child | 1 |
| 擬似クラス | [type=”text”] | 10 |
| Classセレクタ | .sample | 10 |
| IDセレクタ | #sample | 100 |
| 要素に直書き | style=”” | 1000 |
例
サンプル１
上記の例では、
.sample
{
color: white;
}
.sample = 10点
合計10点。
サンプル2
上記の例では、
.sample div
{
color: white;
}
.sample = 10点
div = 1点
合計で１１点。
サンプル１とサンプル２がある場合、記述の前後に関わらず、サンプル２は１１点なので優先して適用されることとなる。
注意事項
重要
- なし。
更新履歴
- 2017/01/12 … 浅野 利博
- 新規作成