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