要素の親子関係
入れ子構造
HTMLは、要素の中に要素を入れる仕組みをもちます。この仕組みは入れ子構造と呼ばれます。
このように表示される場合のHTMLは、次のように書かれます。
<p> HTMLは、要素の中に要素を入れる仕組みをもちます。この仕組みは<b>入れ子構造</b>と呼ばれます。</p>
<p>要素の中に<b>要素が入っています。入れ子構造はネストとも呼びます。
階層構造
包含関係
入れ子とは、要素と要素の包含関係を表しています。図にすると、下の様になります。
階層
包含関係は家系図の様（ツリー構造）に表すことができます。
<p>要素
┃
┗<b>要素
要素の上に要素を重ねていくこのような構造を階層構造と呼びます。
親要素と子要素
<b>要素から見た<p>要素 の様に上の階層にある要素は、親要素(parent)になります。逆に<p>要素から下の階層にある<b>要素は子要素(child)になります。
要素 親の親
┃ 祖先
┗要素 親
┃
┗要素 子
┃ 子孫
┗要素 子の子
祖先要素
階層構造のため、親要素の上にもその親に当る親の親要素、そのまた親と続くことがあります。これら上に重なる要素はまとめて祖先要素(ancestor)と呼びます。
子孫要素
また、逆に子要素の子の子、子の子の子、…と子要素の下の階層の要素については,
子孫要素(descendant)と呼びます。
兄弟要素
親要素
┃
┣子要素───┐
┃ │
┣子要素─きょうだい
┃ │
┗子要素───┘
同じ親要素内に子要素が複数ある場合、それらの要素はきょうだい要素(sibling)となります。要素の縦の関係ではなく、横の関係を表わした呼び方です。
日本語にはsiblingに当てはまる語がないため「兄弟要素」と表記します。
親子関係要素の装飾
継承
親要素の装飾が子要素にも引き継がれることがあります。これが(親に設定した)値の継承です。
<div class="parent">親
<p class="child">子<span>孫１</span><span>孫２</span><span>孫３</span><span>孫４</span><span>孫５</span><span>孫６</span>
</p>
</div>
.parent {
padding: 8px; /*継承しない
margin: 8px 0; /*継承しない
border: 1px solid #6d6; /*継承しない
color: #282; /*継承する
background: #efe; /*継承する
}
子孫１孫２孫３孫４孫５孫６
親要素の文字色が子要素にも引き継がれます。
疑似クラスの利用
:nth-of-type(値)
.parent span:nth-of-type(odd) {
border: 1px solid #f88;
background: #fee;
color: #f00;
}
.parent span:nth-of-type(even) {
border: 1px solid #8af;
background: #eef;
color: #08f;
}
子孫１孫２孫３孫４孫５孫６
コンビネータ(半角スペース)と組み合わせて、parentクラスの子孫要素のspanに、奇数(odd)のときは赤、偶数(even)のときは青の表示をまとめて設定できます。
:nth-of-typeの値
数値 その数に当たる要素を選択
odd 奇数番めを選択
even 偶数番めを選択
nを使った式 ｎには０から順に数値が当てはめられてその順番に当たるものを選択