CSS：カスケーディングスタイルシートの名前になっている“カスケーディング”は，継承と並んで CSS の重要な概念のひとつである。思いどおりのスタイルを実現させるには，この知識が不可欠である。ここでは，その概略を説明する。

　カスケーディングは日本語にすると“段階的にすること”，CSS に限って思い切った訳語を当てると“段々重ね”といったところか。

　このような概念が導入されたという大きな理由は，ひとつの要素にさまざまな方法でスタイルが適用されるため，それらの衝突が生じてしまうからである。たとえば，次の命令が定義されたとする。

このとき，<EM CLASS="class1"> の文字は何色になるだろうか。ここでは，2 つの color 属性の指定が衝突している。これらに，適当な優先順位（宣言を“重ねる”順番）を決めなくてはならない。この順序はカスケーディング順位と呼ばれる。

　カスケーディングに関する基本的な順位則は，次のようになる。

図 3.1 [D]

　この順位の低いものからスタイルが重ねられていく。このとき衝突がおこったら，順位の高いものが上書きされる。衝突しないものについては，そのまま使われる。

　上の 4. について補足すると，たとえば <H1> の中の <EM> に関して，適用される宣言のセレクタが“EM”と“H1 EM”の 2 つあったとき，まず EM をセレクタとする命令の宣言に，H1 EM のそれを重ねるということである。

　これから，最初の例のスタイルを考えてみると，クラスで絞り込まれたもののほうが順位が高いから，色は緑になるはずである。実際，

このようになる。

　このほかに，Section 2 で紹介した継承もなされることを忘れてはならない。

　カスケーディングについての概要がわかったところで，やや複雑な例を通してこれが実際どう行われるか見てみよう。

　これを宣言して，次の例の出力を考えよう。

　通常の <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 になる。このように，カスケーディングでは，衝突した場合，より優先順位の低いものを継承するのではなく，そのまま上書きしてしまう。