CSSで指定したスタイルが適用される優先順位

CSSで指定したスタイルが適用される優先順位についてまとめてみる。参考にしたのは『Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則』という本の66〜67ページ。

1. CSSの提供元による優先順位
   下記の順に優先される。
1. Webページの制作者が作成した「制作者スタイルシート」
2. Webブラウザのユーザーが作成した「ユーザースタイルシート」
3. Webブラウザがデフォルトで適用する「デフォルトスタイルシート」
2. 個別性による優先順位
   個別性の高いものが優先される。（詳細は後述）
3. 記述位置による優先順位
   あとから出てきたものが優先される。
4. !importantルール
   !important宣言の付いたスタイルが最優先される。
   !important宣言によって提供元による優先順位が入れ替わる。
1. ユーザースタイルシート（!important宣言付き）
2. 制作者スタイルシート（!important宣言付き）
3. 制作者スタイルシート
4. ユーザースタイルシート
5. デフォルトスタイルシート

重要だが少々ややこしいのは、「個別性による優先順位」のルールだ。このルールは、ある要素に対するスタイルの指定が競合する場合に、より「個別性」の高いスタイルが優先されるという原則にもとづく。個別性は以下のようにして、最大４桁の正整数で表現される（値が大きいほど個別性が高い）。

• 要素に対して直接style属性が指定された場合は、1000の位を1つカウント
• セレクタに含まれているid属性の数だけ、100の位をカウント
• セレクタに含まれているid以外の属性と擬似クラスの数だけ、10の位をカウント
• セレクタに含まれている要素、擬似要素の数だけ、1の位をカウント

個別性の計算例

記述例	1000の位	100の位	10の位	1の位	個別性
* { }	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

HTMLの要素に直接aligh属性などを指定した場合の個別性の値は0と計算される。したがって、HTML属性の指定と、CSSのスタイル指定が競合する場合は、CSSが優先される。