[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. タイプセレクタの場合、属性が1つしかないので合計が1になる
  3. 子孫要素の場合、属性が2つあるので合計は2
  4. 隣接セレクタの場合、属性が3つあるので合計は3
 div[class="hoge"]{} 0011 = 11
 div p em.hoge{}     0013 = 13
 div.hoge.foo{}      0021 = 21
  1. div要素1つと属性セレクタなので合計11
  2. ID以外の属性1つと、要素が3つなので合計13
  3. ID以外の属性2つと、要素が1つなので合計21
 #id{}          0100 = 100
 div#id{}       0101 = 101
 <div style=""> 1000 = 1000
  1. ID属性単体なので合計100
  2. ID属性一つと属性一つなので合計101
  3. タグ内に書いてるので合計1000

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください