今回はHTMLの子孫要素について解説します。HTMLの要素同士の関係性が整理しきれていなかったので、今回は親要素と子要素についても補足をします。

目次

親要素とは?

HTMLのコード(HTML文書)は要素同士が階層構造になっています。

そもそも要素というのは<p>~</p>などのセットのことを呼び、「~」の部分の内容まで含みます。

<html>
  <head>
    ~
  </head>
  <body>
    <h1>見出し</h1>
    <p>サンプルテキスト</p>
  </body>
</html>
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

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>
HTML

「親要素」は例えば、h1要素から見て、body要素のように

「すぐ1つ上にある階層の要素」

のことを言います。

そのため、h1要素から見て、「親要素」であるbody要素の更に1つ上の階層であるhtml要素はh1要素の「親要素」ではありません。

なぜなら、h1要素にとって、html要素は「すぐ1つ上の階層」ではなく、「2個上の階層」にあるからです。

では、h1要素にとって、html要素は一体どんな関係か?というと「祖先要素」にあたります。

「祖先要素」はある要素(今回はh1要素)にとって直結した上位の要素(親要素の親要素など)のことをいうのです。

h1要素にとって上位の要素は全て「祖先要素」にあてはまります。

そのため、h1要素にとっての親要素であるも「祖先要素」に含まれるのです。

祖先要素はある要素から見て2つ上の階層の要素だけでなく、直結した上位の要素全てを指すため、

「すぐ1つ上の階層である「親要素」も含む上位の階層の要素全て」

を指します。

これが「親要素」と「祖先要素」との違いです。

「祖先要素」は「親要素」よりももっと範囲が広いのです。

子要素と子孫要素との違いは?

子要素と子孫要素との違いも同じことです。

子要素は

「ある要素から見てすぐ1つ下の階層にある要素」

だから2つ下の階層にいる要素は「子要素」ではありません。

一方、子孫要素は「ある要素に直結した下位要素全て」のことを指します。

そのため、ある要素から見て、すぐ1つ下の階層である「子要素」も2階層下の要素なども全て「子孫要素」に該当するのです。

<html>
  <head>
    ~
  </head>
  <body>
    <h1>見出し</h1>
    <p>サンプルテキスト</p>
  </body>
</html>
HTML

先程の例で言えば、html要素にとって、すぐ1つ下の階層であるhead要素やbody要素も2つ下の階層であるh1要素やp要素も全て「子孫要素」ということです。

チェックテスト

チェックテストを確認する

下記コードにおいて下記3つの要素はどれに当たるかdiscordで共有ください。

①h1タグから見た親要素

②colorクラスが付与されているdivから見た子要素

③htmlタグから見た子孫要素

※子孫要素のことは孫要素ともいいます。

TOP