CSSにはスタイルが適用される優先順位があります。 大きなサイトになればなるほど、スタイルが競合して適用されないといったケースが出てきますので注意が必要です。

CSSのスタイル適用順を決定する要素

CSSの提供元による優先順位

  1. Webページ制作者が作成したCSS[制作者スタイルシート]
  2. Webブラウザのユーザーが作成したCSS[ユーザースタイルシート]
  3. Webブラウザがデフォルトで適用するCSS[デフォルトスタイルシート]

個別性による優先順位

個別性の高いものが優先される

記述位置による優先順位

後から出てきたものが優先される

!importantルール

!important宣言の付いたスタイルが最優先される

  1. ユーザースタイルシート(!important宣言付き)
  2. 制作者スタイルシート(!important宣言付き)
  3. 制作者スタイルシート
  4. ユーザースタイルシート
  5. デフォルトスタイルシート

 

個別性による優先順位(個別性の計算ルール)

個別性は最大4ケタの正数値で表現され、より大きい値のスタイル程、個別性が高いと判断され優先される。計算方法は以下のようになる。

1,000の位(a)

(X)HTML文書内に、style属性がある場合は、1をカウント

100の位(b)

セレクタに含まれているid属性の数をカウント

10の位(c)

セレクタに含まれているid以外の属性と、疑似セレクタの数をカウント

1の位(d)

セレクタに含まれている要素、疑似要素の数をカウント

計算例

記述例

a

b

c

d

個別性

*

0

0

0

0

0

li

0

0

0

1

1

li:first-line

0

0

0

2

2

ul li

0

0

0

2

2

ul ol+li

0

0

0

3

3

p[class="memo"]

0

0

1

1

11

ul ol li.menu

0

0

1

3

13

li.menu.service

0

0

2

1

21

#example

0

1

0

0

100

div#example

0

1

0

1

101

style=""

1

0

0

0

1000

最近、(X)HTMLやHTML5の勉強をしております。