今回はHTMLの子孫要素について解説します。HTMLの要素同士の関係性が整理しきれていなかったので、今回は親要素と子要素についても補足をします。
目次
親要素とは？
HTMLのコード（HTML文書）は要素同士が階層構造になっています。
そもそも要素というのは<p>~</p>などのセットのことを呼び、「～」の部分の内容まで含みます。
<html>
<head>
～
</head>
<body>
<h1>見出し</h1>
<p>サンプルテキスト</p>
</body>
</html>上記のようなコードがある場合に
<html>~<html>は<head>~</head>や<body>~</body>を挟んだ状態＝入れ子構造になっています。
しかも、html要素（<html>~<html>)はhead要素やbody要素のすぐ1つ上の階層にあります。
この場合のhtml要素（<html>~<html>)はhead要素やbody要素の「親要素」といいます。
このようにある要素（今回はhead要素やbody要素）から見て、「すぐ上の階層にある要素(今回はhtml要素）」のことを「親要素」といいます。
子要素とは
親要素がわかったら、子要素は簡単です。
「ある要素から見てすぐ下の階層にある要素」を「子要素」といいます。
つまり、先ほどのコード⇩の場合
<html>
<head>
～
</head>
<body>
<h1>見出し</h1>
<p>サンプルテキスト</p>
</body>
</html>html要素はhead要素やbody要素の親要素でした。
一方、head要素とbody要素はhtml要素のすぐ下の階層にあるので、html要素から見れば「子要素」となります。
つまり、どこの視点から見るかによって呼び方が変わってくるのです。
- html要素の視点から見れば、head要素やbody要素は「子要素」
- head要素やbody要素から見れば、html要素は「親要素」
となります。
親子の関係は要素同士がすぐ1つ上(あるいは下）の階層にあることが条件なので、2つ上の階層にいる要素のことを「親要素」とは呼べないことに注意が必要です。
祖先要素・子孫要素の違いとは
親要素・子要素と紛らわしいのが、祖先要素と子孫要素です。
親要素と祖先要素の違いは？
「親要素」と「祖先要素」の違いを先ほどの例で説明します。
<html>
<head>
～
</head>
<body>
<h1>見出し</h1>
<p>サンプルテキスト</p>
</body>
</html>「親要素」は例えば、h1要素から見て、body要素のように
「すぐ1つ上にある階層の要素」
のことを言います。
そのため、h1要素から見て、「親要素」であるbody要素の更に1つ上の階層であるhtml要素はh1要素の「親要素」ではありません。
なぜなら、h1要素にとって、html要素は「すぐ1つ上の階層」ではなく、「2個上の階層」にあるからです。
では、h1要素にとって、html要素は一体どんな関係か？というと「祖先要素」にあたります。
「祖先要素」はある要素(今回はh1要素）にとって直結した上位の要素(親要素の親要素など）のことをいうのです。
h1要素にとって上位の要素は全て「祖先要素」にあてはまります。
そのため、h1要素にとっての親要素であるも「祖先要素」に含まれるのです。
祖先要素はある要素から見て2つ上の階層の要素だけでなく、直結した上位の要素全てを指すため、
「すぐ1つ上の階層である「親要素」も含む上位の階層の要素全て」
を指します。
これが「親要素」と「祖先要素」との違いです。
「祖先要素」は「親要素」よりももっと範囲が広いのです。
子要素と子孫要素との違いは？
子要素と子孫要素との違いも同じことです。
子要素は
「ある要素から見てすぐ１つ下の階層にある要素」
だから2つ下の階層にいる要素は「子要素」ではありません。
一方、子孫要素は「ある要素に直結した下位要素全て」のことを指します。
そのため、ある要素から見て、すぐ1つ下の階層である「子要素」も2階層下の要素なども全て「子孫要素」に該当するのです。
<html>
<head>
～
</head>
<body>
<h1>見出し</h1>
<p>サンプルテキスト</p>
</body>
</html>先程の例で言えば、html要素にとって、すぐ1つ下の階層であるhead要素やbody要素も2つ下の階層であるh1要素やp要素も全て「子孫要素」ということです。
チェックテスト
チェックテストを確認する
下記コードにおいて下記3つの要素はどれに当たるかdiscordで共有ください。
①h1タグから見た親要素
②colorクラスが付与されているdivから見た子要素
③htmlタグから見た子孫要素
