CSS(カスケーディングスタイルシート)でのプロパティの継承。

上位要素と下位要素。

先ず、上位要素とか下位要素と言う概念について説明しましょう。

• ある要素の上位要素とは、その要素を内容にしている要素、つまり自分を含んでいる要素
• ある要素の下位要素とは、その要素の内容となっている要素

となります。

具体的な例として、HTML 文書で以下のようなマークアップがあったとします。

• 読み飛ばす

<p>
    <dfn>堀北真希</dfn>は、東京都清瀬市出身の女優である。
    </p>

このとき、<p>要素(段落)には内容としてマークアップされた<dfn>要素(定義語)が含まれておりますが、

• <p>要素は <dfn>堀北真希</dfn> 要素から見たら上位要素
• <dfn>堀北真希</dfn> 要素は<p>要素から見たら下位要素

となります。

• 特に直下に書かれた下位要素を子要素、子要素から見た上位要素を親要素とも言います。

継承の実例。

さて、上記の例で、<p>要素(に黒で表示すると言うスタイル指定( color: #000 プロパティ)が与えられていたとします。

このとき、下位にある <dfn>堀北真希</dfn> 要素について、特に前景色(color プロパティ)が指定されていなかった場合、この要素はどのように扱われるでしょうか。

実は、color プロパティは、仕様で特に指定が無い場合には上位要素の値を継承する決まりになっているのです。

従って、この場合、<p>要素の下位にある <dfn>堀北真希</dfn> 要素は、特に color プロパティで値が指定されていなければ、<p>要素での指定が継承されると言う事になり、従って<p>要素で指定された黒がそのプロパティ値となると言う訳です。