CSSセレクタの詳細度(固有性・優先度)。

CSSに於ける、セレクタの詳細度(固有性・優先度)について解説します。

CSSに於いて、詳細度(固有性・優先度)の概念が必要な理由。

CSSに於けるプロパティ定義が複雑になると、後方でのプロパティ定義が前方でのそれと矛盾する事があります。

原則としては後方のプロパティ定義で上書きされる事となっておりますが、一律にそのような扱いにすると、複雑なプロパティ定義が書き難くなってしまうでしょう。

そこで、CSSの仕様では、より複雑なセレクタでのプロパティ定義はより単純なセレクタでのプロパティ定義では上書きされない事としております。

この複雑さを表す値こそが、詳細度(固有性・優先度)と呼ばれるものです。

CSSに於ける詳細度(固有性・優先度)の計算方法。

CSSに於ける詳細度(固有性・優先度)の計算方法は、仕様により異なります。

CSS第二水準(CSS 2)の場合の詳細度(固有性・優先度)の計算方法。

CSS第二水準(CSS 2)では、以下の要領で詳細度を算出します。

  1. まず、以下の要領で変数a, b及びcの値を算出します。
    1. まず、セレクタ内の一意セレクタ(IDセレクタ)の数を a とします。
      • style属性で定義されたプロパティは一律にaを 1とします。
    2. 続いて、セレクタ内のクラスセレクタ, 属性セレクタ及び擬似クラスの総数を b とします。
    3. 最後にセレクタ内の要素セレクタ(タイプセレクタ・型セレクタ)の総数を c とします。
  2. 以上から求められる値を「a b c」と並べたものを十進数に見立てた値が詳細度となります。
    • a, b及びcが10未満なら「a×100＋b×10＋c」で算出した値と一致します。このため、このように解説している場合も少なくありません(a, b及びcが10以上になる事はまずありませんから…)。
  • 以上から、style属性で定義されたプロパティの詳細度は常に100と言う事になります。

CSS第二水準第一改訂版(CSS 2.1)の場合の詳細度(固有性・優先度)の計算方法。

CSS第二水準第一改訂版(CSS 2.1)では、以下の要領で詳細度を算出します。

  1. まず、以下の要領で変数a, b, c及びdの値を算出します。
    1. まず、style属性で定義されたプロパティは一律にaを 1とし、そうでなければaを 0とします。
    2. 続いて、セレクタ内の一意セレクタ(IDセレクタ)の数を b とします。
    3. 更に、セレクタ内のクラスセレクタ, 属性セレクタ及び擬似クラスの総数を c とします。
    4. 最後にセレクタ内の要素セレクタ(タイプセレクタ・型セレクタ)及び擬似要素の総数を c とします。
  2. 以上から求められる値を「a b c d」と並べたものを十進数に見立てた値が詳細度となります。
  • 以上から、style属性で定義されたプロパティの詳細度は常に1000と言う事になります。

CSS第二水準第一改訂版(CSS 2.1)での詳細度算出方法のCSS第二水準(CSS 2)での詳細度算出方法との相違点としては、

が挙げられるでしょう。

CSS以外に依るプロパティ定義の詳細度。

ユーザエージェントにはデフォルトのスタイルがあり、これはCSS以外に依るプロパティ定義を持つと考えられます。

また、HTMLには物理要素が定義されており、これらもまたCSS以外に依るプロパティ定義を持つと考えられます。

こう言ったCSSに依らないプロパティ定義は、一律に詳細度 0と見なされます。

加えて、これらのプロパティ定義は、CSSでのプロパティ定義より前に定義されているものと見なされます。

従って、CSSでプロパティ定義を行えば、必ずそれで上書きされる事となります。

  • 全称セレクタ(汎用セレクタ)のみから成るセレクタなど、CSSでも詳細度 0となるセレクタは存在しますが、これらも後方に置かれているものと見なされる事から、上書きが可能です。

例えば、以下のようにする事で、全ての物理要素の効果を消す事も出来ます。

  • 本当はinherit値を使えばもっと簡単ですが、インターネットエクスプローラのサポート状況から以下のようにしております。
i, b, tt, u, s, strike, font, small, big, sub, sup {
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
    font-family: "ＭＳ Ｐゴシック", sans-serif;   /* デフォルトがゴシック体表示の場合。 */
    text-decoration: none;
    vertical-align: baseline;
    color: 前景色;
    }

p, h1, h2, h3, h4, h5, h6, div, center {
    text-align: left;
    }

しらぎくのウェブサイト作成入門サイトマップ