CSSの優先順位

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)

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

計算例

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