[CSS]スタイル優先順位の個別性と計算方法

クリエイターが身につけておくべき新・100の法則という本から紹介。
CSSは下に書いたものが優先されるプログラム的な仕様のほかに、優先順位を決めるルールがある。

よく知られてるのは以下の基本ルール。

• CSS作成者による優先順位。
  1. Webページ製作者が作成したCSS
  2. Webブラウザ使用者が作成したCSS
  3. WebブラウザのデフォルトCSS
• 記述位置が下のものが優先される。
• !important宣言の付いたスタイルが最優先される。
  !importantが付くと優先順位が変わる。
  1. Webブラウザ使用者が作成したCSS（!important有）
  2. Webページ製作者が作成したCSS(!important有）
  3. Webページ製作者が作成したCSS
  4. Webブラウザ使用者が作成したCSS
  5. WebブラウザのデフォルトCSS

さらに、スタイルの個別性を決める数値というものが存在する。

セレクタの使い方によって個別性を決める数値が変わる。
個別性は4桁の0と1で計算されるが、同じ値を持つものが存在した場合は、下にあるものが優先される。

4桁の個別性を決める計算方法は次の通り。

1000の位

XHTML文書内にstyle属性があれば1

100の位

セレクタに含まれるID属性をカウントした数

10の位

セレクタに含まれるID以外の属性と、擬似クラスをカウントした数

1の位

セレクタに含まれる要素、擬似要素をカウントした数

※CSS以外のタグ等で指定されたスタイル（colorやsize等）は全て0。

参考例

 *{}　            0000 = 0
 div{}            0001 = 1
 div p{}          0002 = 2 
 div p+p          0003 = 3

1. ユニバーサルセレクタしかないので合計0
2. タイプセレクタの場合、属性が１つしかないので合計が１になる
3. 子孫要素の場合、属性が２つあるので合計は２
4. 隣接セレクタの場合、属性が３つあるので合計は３

 div[class="hoge"]{} 0011 = 11
 div p em.hoge{}     0013 = 13
 div.hoge.foo{}      0021 = 21

1. div要素１つと属性セレクタなので合計１１
2. ID以外の属性１つと、要素が３つなので合計１３
3. ID以外の属性２つと、要素が１つなので合計２１

 #id{}          0100 = 100
 div#id{}       0101 = 101
 <div style=""> 1000 = 1000

1. ＩＤ属性単体なので合計１００
2. ID属性一つと属性一つなので合計１０１
3. タグ内に書いてるので合計１０００

important宣言は、全てを帳消しにして上書きさせるので、個別性の値では9999になると思う。