2022 / 06 / 30

2024 / 01 / 12

【図解で簡単】親要素, 子要素って何？HTMLの要素の関係性を解説

HTMLの構造を説明する際、よく「親要素」や「子要素」などの単語が使われます。当たり前のように出てくる単語ですが、勉強を始めたばかりの方にはあまり馴染みがないでしょう。今回は、そんな要素の構造を示す単語について、基本用語を詳しく解説していきます。

HTMLの要素（タグ）の関係性を表す用語

まず親要素や子要素といった呼称は、それぞれが関係性を持ったHTML構造において成り立ちます。

下の画像は、それぞれが関係性を持っているHTML構造の例です。

簡単に説明すると、以下のようになります。

<ul> … 箇条書き項目を包括してリストにする要素
<li> … リストの各項目を表す要素
<div> … 各項目の内容を表す要素

階層

これらの構造を説明する際、よく階層という言葉が使われます。

階層とは、HTMLの構造上、そのタグがどの位置かを示すものです。

例えば上記の画像の場合、

赤文字で書かれたulという要素のある場所が一番上の階層で、その下にli要素、さらにその下の階層にdiv要素がある状態

だと説明できます。

階層をわかりやすく可視化すると、以下のようになります。

では、上記のサンプルをもとに、親要素や子要素などの用語について解説していきます。

親要素

親要素とは、特定の要素の階層を有する要素を指します。

言い方はややこしいですが、下のように図解してみるとわかりやすいかもしれません。

まず最下層にあるdiv要素の立場から見た場合、div要素が存在している階層を有している要素は、li要素。

つまり、li要素はdiv要素の親要素と判断できます。

一方でli要素の視点だと、上にあるul要素が親要素であり、自身は親要素ではなくなるわけです。

また、jQueryなどで親要素を取得したい場合には、

// li要素の親要素ulを取得
$("li").parent();

というような記述をします。ただし、CSSで親要素を指定するような記述は現時点では扱えないため、注意が必要です。

子要素

もう察している方がほとんどだと思いますが、子要素は親要素とは反対に、特定の要素が有している、一つ下の階層にある要素を指します。

図解したものが下の画像です。

要するに、要素Xから見て下にあるものが子要素で、子要素から見た要素Xが親要素という、依存的な関係性になっています。

CSSによるコーディングはもちろん、プログラミングをする際にも頻出する用語なので、しっかり押さえておくのがおすすめです。

jQueryやCSSで指定する場合は、

// CSS
ul > li{}

// jQuery
$("ul").children("li");

と記述します。どちらもよく目にするコードですね。

孫要素

孫要素は、特定の親要素から見た際、子要素よりさらに下の階層にある要素のことです。

サンプルの場合は、下図のようにul要素から見たdiv要素が、孫要素に該当します。

ただし、孫要素は子要素とは違い、一つの階層に限定されるわけではありません。図では孫要素となっているdiv要素の下に、いくつもの階層があった場合でも、それらは全てulやliの孫要素という扱いになります。

孫要素だけをCSSやjQueryで指定したい場合には、一度以下のような形で子要素の指定を経由する必要があります。

// CSS
// ulの子要素であるliの下にある全ての要素（孫要素）
ul > li *{}

// jQuery
$("ul").children("li").find("*");

// 「*」というのは、「全ての要素」を指す

少しだけ記述がややこしくなるので、注意が必要です。

また、子要素や孫要素など、一つの要素の下にある全ての要素を指す場合は、子孫要素とまとめて呼びます。

子孫要素を呼び出す場合は、いちいち子要素を経由しなくても、

// CSS
ul *{}

とシンプルに記述するだけでOKです。

祖先要素（先祖要素）

親と子の関係があるよう、孫と対等的な関係を表す用語として、「祖先要素」というものがあります。これについては造語というか、色々と呼び方はありますが、ここでは祖先要素という呼び方を使います。

祖先要素とは、とある要素の親要素より、さらに上にある要素を指す言葉です。

孫要素と同じく、親要素より上にある要素を不特定多数に指す言葉ですが、CSSで指定する場合は、コードとして記述するのが多少面倒になります。

ただ、jQueryで指定する場合にはparents()メソッドがあるため、それほど苦労はしません。

// 祖先要素を取得
$("div").parent("li").parents();

ただ、いくつもある祖先要素を取得する場合は、ケースに合わせてコードを書き換えないと、予期せぬバグの原因になる可能性があります。

まとめ

HTML要素の関係性は、初心者の方からすると混乱のもとになりやすく、理解しにくいかもしれません。しかし、図解しながら追っていくと、それほどややこしいお話ではないというのが、わかってもらえたのではないでしょうか。要素の関係性について苦手意識がある方は、この記事を通じて、少しでも理解を深めておくのがおすすめです。