Section 11 : カスケーディング順位

 Step forward CSS の Section 3 でも触れたように,CSS においてカスケーディングはスタイルシートを設計する上でひじょうに重要な概念である。ここでは,さらに詳しくカスケーディングについて解説する。間違いなく無駄のないスタイルシートを作る知識としていただきたい。

カスケーディング順位

 カスケーディングとは同じ要素に対していくつかの宣言が衝突している場合に,それらの順位を決めて宣言を重ねていく方法である。

 その概略については Setp forward CSS の Section 3 で解説した。実用上はそのときの解説でほとんど困ることはないだろうが,ときにはどちらの順位が上か微妙なこともあるだろうし,そのあとで解説した概念にカスケーディング順位に関わっているものもある。

 そこで,ここでは W3C による CSS1 仕様にある,カスケーディング順位の決め方をもれなく紹介・解説しておこう。

 カスケーディング順位を決定するアルゴリズムは次のとおり。

  1. まず,注目している要素に合致するセレクタをもつすべての命令から,宣言をすべて抜き出す。もし,ある属性に対する宣言が場合,それが値を継承する属性ならば親要素から属性値を継承する。継承されない属性は初期値になる。
  2. もし,宣言が “! important” を伴う場合は,そのカスケーディング順位を上げる。
  3. 筆者と読者のスタイルシートがある場合,筆者のスタイルシートにある指定のカスケーディング順位を上げる。すなわち,筆者と読者のスタイルシートの両方に同じ属性についての宣言がある場合は,筆者のものが読者のものを上書きする。
  4. セレクタとなっている ID,クラス,入れ子の状況に応じて前項までで決められた順位に基づいて並べ替える。
  5. ここまででカスケーディング順位が同じものが複数ある場合,あとに宣言されたものを優先する。@import 命令はその命令を取り込まれたスタイルシートに置き換えて考える。すなわち,呼び出されたファイル中の宣言は,呼び出し元のファイルのものより前になされていたと考える。
  6. STYLE 属性に書かれたものは,ID によって絞り込まれたいちばん最後の指定と見なされる。
カスケーディング順位の決定方法。
図 11.1 [D]

 具体的には,1. で適用されるべき宣言を順にすべて抜き出して,条件ごとに並べ替えることを想像すればよい。2. で,“! important”を伴うものとそうでないものとを分ける。2 で分けられたそれぞれについて,読者のもの,筆者のものと分けてみるのが 3. である。ここまでで,カスケーディング順位が低い順に“読者の通常の宣言”“筆者の通常の宣言”“読者の‘! important’を伴う宣言”“筆者の‘! important’を伴う宣言”となっているはずである。

 ここまで分けられたそれぞれについてさらに 4. で並べ替えを行う。その手順を以下に示す。

 これをすべての(適用されうる)宣言について調べ,まず a の小さい順に並べ替える。次に並べ替えられたそれぞれについて b が小さい順に並べる。同様に,c についても並べる。5. によって,a も b も c も等しい宣言は出現順に並べる。

 以上の作業でカスケーディング順位の低い順に宣言が並べ替えられる。

 たとえば次の 1. で次の宣言があったとして,これをカスケーディング順位にしたがって並べ替えてみよう。

/*  1 */ EM { font-weight: bold; }
/*  2 */ P EM { text-transform: capitalize; }
/*  3 */ P Q EM { font-weight: bolder; }
/*  4 */ P EM.spacy { letter-spacing: 0.2em; }
/*  5 */ P EM { color: green ! important; }
/*  6 */ DIV.text Q EM { color: blue; }
/*  7 */ EM#id01 { text-transform: uppercase; }
/*  8 */ #id01 { color: red; }
/*  9 */ Q EM { font-style: italic ! important; }
/* 10 */ DIV.text EM { font-style: oblique; }
/* 11 */ P.intro Q.spec EM { text-decoration: underline; }

 規則 2. にしたがうと,順序は

1,2,3,4,6,7,8,10,11(ここまで通常の宣言),5,9(ここまで“! important”を伴う宣言)

とできる。規則 3. は今は考えていないとして,規則 4. によって (a,b,c) は 2. までの順序でそれぞれ,

1 (0,0,1),2 (0,0,2),3 (0,0,3),4 (0,1,2),6 (0,1,3),7 (1,0,1),8 (1,0,0),10 (0,1,2),11 (0,2,3),5 (0,0,2),9 (0,0,2)

並べ替えると

1,2,3,4,10,6,11,8,7,5,9

4 と 10,5 と 9 はあとに指定したほうが優先なので,それぞれ 10,9 が高い順位を得る。よって,

1,2,3,4,10,6,11,8,7,5,9

の順で宣言が重ねられていく。結局,適用されるスタイルは,

font-style: italic;
color: green;
text-transform: uppercase;
text-decoration: underline;
letter-spacing: 0.2em;
font-weight: bolder;

である。

 厳格な HTML 4(HTML 4 Strict)では関係ないのだが,HTML 4 Transitional では HTML の属性値とスタイルシートの指定が衝突することもある。この場合,HTML の属性値は筆者のスタイルシートの先頭に書かれた,(a,b,c)=(0,0,1) の宣言と見なされる。