要素の親子関係を探ってみよう。 - みかづきブログその3

前回の説明の中で、突然 親の要素 という言葉がでてきました。

今回は要素の親子関係、兄弟関係について説明したいと思います。

親要素・子要素

以前解説しましたが、htmlではタグの中にタグを記述することができます。
すなわち要素の中に要素をいれることができるのです。
この際、外側の要素は内側の要素の親要素、内側の要素は外側の要素の子要素になります。
テキストだとわかりにくいですね。

<yuuzan>
    <shirou></shirou>
</yuuzan>

こういう場合は、yuuzan要素がshirou要素の親要素になります。
※ htmlにはyuuzan要素、shirou要素はありません。

実際に存在するタグで説明すると、

<body>
    <h1>僕が考えた最強の打線。</h1>
    <p>僕が考えた最強の打線を発表します。</p>
    <ol>
        <li>遊 小坂</li>
        <li>二 西岡</li>
        <li>一 福浦</li>
        <li>右 サブロー</li>
        <li>指 初芝</li>
        <li>捕 里崎</li>
        <li>三 今江</li>
        <li>左 大塚</li>
        <li>中 諸積</li>
    </ol>
</body>

liタグからみたolが親要素。
ol要素からみたli要素が子要素となります。
h1要素、p要素、ol要素からみたbody要素も親要素となります。

body - h1
     - p
     - ol - li
          - li
          - li
          - li
          - li
          - li
          - li
          - li
          - li

家系図的な図で書くとこんな感じです。
すべての要素はbody要素の子孫ということになります。
そう。body要素は母なる大地のような存在なのです。（違うかもしれません）

兄弟要素

同じ親要素の子要素同士は兄弟要素になります。

<body>
    <h1>僕が考えた最強の打線。</h1>
    <p>僕が考えた最強の打線を発表します。</p>
    <ol>
        <li>遊 小坂</li>
        <li>二 西岡</li>
        <li>一 福浦</li>
        <li>右 サブロー</li>
        <li>指 初芝</li>
        <li>捕 里崎</li>
        <li>三 今江</li>
        <li>左 大塚</li>
        <li>中 諸積</li>
    </ol>
</body>

こちらの例だと、
h1要素、p要素、ol要素が兄弟要素。
liタグ同士も兄弟要素になります。

スタイルの継承

前回、

<body>
    <h1>僕が考えた最強の打線。</h1>
    <p>僕が考えた最強の打線を発表します。</p>
    <ol style="color: red;">
        <li>遊 小坂</li>
        <li>二 西岡</li>
        <li>一 福浦</li>
        <li>右 サブロー</li>
        <li>指 初芝</li>
        <li>捕 里崎</li>
        <li>三 今江</li>
        <li>左 大塚</li>
        <li>中 諸積</li>
    </ol>
</body>

と、ol要素のstyle属性にcolor: red;と指定し、li要素の文字色を赤に指定しましたが、これは子要素は、親要素のスタイル（の一部）を継承するためです。
子供は親の（文字）色に染まるのです。

教師の子供が教師になったり、タレントの子供が2世タレントになったりするのは親の職業というスタイルを継承しているのかもしれません。（違うかもしれません）

<body>
    <h1>僕が考えた最強の打線。</h1>
    <p>僕が考えた最強の打線を発表します。</p>
    <ol style="color: red;">
        <li>遊 小坂</li>
        <li>二 西岡</li>
        <li>一 福浦</li>
        <li>右 サブロー</li>
        <li style="color: blue;">指 初芝</li>
        <li>捕 里崎</li>
        <li>三 今江</li>
        <li>左 大塚</li>
        <li>中 諸積</li>
    </ol>
</body>

と、子要素に親と違うスタイルを指定すると基本的に子のスタイルが優先されます。
そう。子は親に敷かれたレールではなく、我が道を進んでいくのです。
※ font-sizeを%で指定した際などはまた違う結果になるのですが、それは今回は触れません。

継承するスタイル・継承しないスタイル

基本的に継承されて都合の良いと考えられているものは継承され、継承されて都合の悪いと思われているものは継承されません。
詳しく知りたい人は調べてみてください。下記リンクが参考になります。

今回は以上です。次回はstyleタグについて説明したいと思ってます。