Step forward CSS - Section 2

Section 2 : “継承”と“入れ子による識別”

　“継承”は，CSS の重要な概念のひとつである。これとあわせて，要素の入れ子の状況によってスタイルを分ける便利な方法を紹介する。

　“継承”というと難しそうではあるが，この概念によって CSS はきわめて自然で，理解しやすいものとなっている。

　たとえば，次の例を見てもらおう。

CSS の重要な概念に，継承があります。

このとき，パラグラフは栗色になることは一見してわかる。では，そのなかの  でくくられた部分はどうだろう。結果は，こうなる。

それがどうしたと思われるかもしれないが，これが継承である。 のスタイルであった“栗色”が，その中に入っている  に継承されている。“継承”とはある要素に，それを囲む要素（親要素）のスタイルがそのまま適用されることである。

これはいたって自然な考え方である。もし継承がなかったら，先ほどの  はいきなり“既定値”の色に戻されてしまう。周囲とあわせるには， に“栗色”のスタイルを新たに指定しなければならない。

　一般に，ほとんどの CSS の属性がより外側の要素の属性値を継承するようになっている。ところが例外もある。たとえば，マージンに関する属性は継承されない。また，background-color 属性は継承されないが，既定値が“透過”なので見かけ上継承される。

　継承の基本はこれだけであるが，問題は“属性値の何が継承されるのか”である。場合によっては，属性値の指定のしかたによってその中の要素（子要素）に渡される属性値が変わる場合がある（line-height 属性など）。これについては後で触れるが，気にとめておきたいことがらである。

　ちなみに，今まで紹介した属性

は，継承がなされる。

First step CSS の Section 11 で“クラス”によってスタイルを分ける方法を紹介した。ここで紹介するのは，“<UL> の中の <LI>”といったふうに入れ子の状況によって適用されるスタイルを変える方法を紹介する。

この方法は <STYLE> に書き込む場合や外部の CSS ファイルに書かれる場合に使う。入れ子の状況を半角スペースで区切って入れていく。一括指定の場合に半角カンマが入るのと間違えないように。

H2 SPAN { color: green; }
P SPAN { color: navy; }

前者は“<H2> の中の ”，後者は“ の中の ”に指定されたスタイルである。実際，これを定義して書くと，

<H2>入れ子による絞り込み</H2>
要素の入れ子の状況で適用されるスタイルを変えることができます。これはコンテキスチュアルセレクタとも呼ばれます。

確かに識別がなされている。この場合，<H2> と  以外の中の  は，（継承された）既定値のスタイルである。同様の指定を行って確かめてみよう。

　これはクラスと絡めるとさらに複雑な指定ができる。

P.fire EM { color: red; }
P.giant EM { font-size: larger; }

このような場合，CLASS 属性に fire を含む  の中に含まれている  を赤に，一方，CLASS 属性に giant を含む  の中に含まれる  の文字を大きくできる。無指定の  の  は継承も含めた既定のスタイルになる。

　クラスの指定などももっと複雑にできるし，入れ子をもっと深くすることもできる。

UL UL.small LI EM.red { color: red; }

というのもありである。