解説

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 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.