CSS:カスケーディングスタイルシートの名前になっている“カスケーディング”は,継承と並んで CSS の重要な概念のひとつである。思いどおりのスタイルを実現させるには,この知識が不可欠である。ここでは,その概略を説明する。
カスケーディングは日本語にすると“段階的にすること”,CSS に限って思い切った訳語を当てると“段々重ね”といったところか。
このような概念が導入されたという大きな理由は,ひとつの要素にさまざまな方法でスタイルが適用されるため,それらの衝突が生じてしまうからである。たとえば,次の命令が定義されたとする。
EM { color: navy; }
.class1 { color: green; }
このとき,<EM CLASS="class1"> の文字は何色になるだろうか。ここでは,2 つの color 属性の指定が衝突している。これらに,適当な優先順位(宣言を“重ねる”順番)を決めなくてはならない。この順序はカスケーディング順位と呼ばれる。
カスケーディングに関する基本的な順位則は,次のようになる。
この順位の低いものからスタイルが重ねられていく。このとき衝突がおこったら,順位の高いものが上書きされる。衝突しないものについては,そのまま使われる。
上の 4. について補足すると,たとえば <H1> の中の <EM> に関して,適用される宣言のセレクタが“EM”と“H1 EM”の 2 つあったとき,まず EM をセレクタとする命令の宣言に,H1 EM のそれを重ねるということである。
これから,最初の例のスタイルを考えてみると,クラスで絞り込まれたもののほうが順位が高いから,色は緑になるはずである。実際,
<P>宣言が衝突したときは,<EM CLASS="class1">カスケーディング順位</EM>に従って重ねられていきます。</P>
宣言が衝突したときは,カスケーディング順位に従って重ねられていきます。
このようになる。
このほかに,Section 2 で紹介した継承もなされることを忘れてはならない。
カスケーディングについての概要がわかったところで,やや複雑な例を通してこれが実際どう行われるか見てみよう。
.class1 { font-size: larger; }
P { font-size: smaller; margin-left: 60pt; }
DIV.class2 P { margin-left: 0; }
これを宣言して,次の例の出力を考えよう。
<P>通常のパラグラフ。</P>
<P CLASS="class1">CLASS="class1" のパラグラフ。</P>
<DIV CLASS="class2">
<P>DIV CLASS="class2" の中のパラグラフ。</P>
</DIV>
<P>カスケーディングと継承の<SPAN CLASS="class1">違い</SPAN>。</P>
通常のパラグラフ。
CLASS="class1" のパラグラフ。
DIV CLASS="class2" の中のパラグラフ。
カスケーディングと継承の違い。
通常の <P> と比較して見ていこう。
クラス“class1”とは,font-size が衝突している。ここでは,クラスを使って絞り込まれた宣言が高いカスケーディング順位をもち,前述の“順位則 3.(クラス絞り込みが優先)”より,font-size は larger になる。衝突していないもの(margin-left)は通常の <P> のものが使われる。
“DIV.sample P”のセレクタを伴った宣言は入れ子によって絞り込まれていて,これに合致する 3 番めの例に適用される。3 番めの例では,通常の <P> のスタイルも適用されうるから,ここでもカスケーディングが起こり,“順位則 4.(入れ子による絞り込みが優先)”より,“P”の margin-left はより順位の高い“DIV.sample P”のものに置き換えられ,0 になる。
4 番めの例は,2 番めと比べていただきたい。2 番めは font-size について,カスケーディングにより larger となり,結果として継承されたサイズ medium がひと回り大きくなって large になるが,4 番めの <SPAN> は,<P> の smaller が適用された small のサイズを継承し,それを larger で大きくするから,結果として medium になる。このように,カスケーディングでは,衝突した場合,より優先順位の低いものを継承するのではなく,そのまま上書きしてしまう。