話題：親子の話し

HTML要素の親子関係とは

HTMLタグには、開始タグと終了タグがありました。HTMLファイルでは、文章を開始タグと終了タグで囲いました。また、HTMLタグを開始タグと終了タグで囲うこともしました。

<p>
    <span>文章</span>
</p>

上のソースコードでは、span要素がpタグで囲われています。p要素は、span要素の親要素です。span要素は、p要素の子要素です。

つまり、何らかの要素を開始タグと終了タグで囲うと、そこに親子関係が生まれます。

<p>
    <span>
        <a>文章</a>
    </span>
</p>

孫要素もあります。上図では、p要素から見て、a要素は孫要素です。

<p>
    <span>
        <a>文章</a>
    </span>
    <div>
        <a>文章</a>
    </div>
</p>

また、上図では、p要素の中にspan要素とdiv要素が含まれていますが、span要素とdiv要素は兄弟要素です。

Beautify (ビューティファイ：Bracketsの「花火」アイコン) を使うと、どのタグがどんなタグで囲われているかが見やすくなり、親子関係が一目で分かるようになります。

CSSセレクタ

要素の親子関係がわかると、CSSが書きやすくなります。

<p>
    <span>
        <a>文章１</a>
    </span>
    <span>文章２</span>
    <div>
        <span>文章３</span>
        <a>文章４</a>
    </div>
</p>
<span>文章５</span>

CSSで、p要素の中の3つのspan要素にスタイルを当てたいときは、pとspanの間に半角スペースを置き、

p span {
    property: value;
}

と書きます。この半角スペースは、子孫セレクタです。p要素の子孫要素のうちのすべてのspan要素に掛かります。文章１と文章２、文章３に掛かります。文章５は、p要素の子孫要素ではないので掛かりません。

p > span {
    property: value;
}

また、「>」は、子セレクタです。子孫セレクタと違い、孫要素には掛かりません。文章１と文章２に掛かりますが、文章３は、p要素にとって子要素ではなく孫要素なので掛かりません。

p + span {
    property: value;
}

さらに、「+」は、兄弟セレクタです。隣接セレクタともいいます。p要素の兄弟要素のspan要素に掛かります。文章５に掛かります。

まとめ

要素の親子関係は、ある要素を開始タグと終了タグで囲うことに始まり、それがすべてです。HTMLは開始タグと終了タグで囲ってできています。

CSSセレクタも、3種類を押さえておけば難しくはありません。特に半角スペースは割と使いたくなると思いますので、子孫セレクタのことを思い出して頂ければ幸いです。

※<img>や<br>や<hr>など、終了タグのない要素もあります。これらの要素にも、もちろん、親子関係は発生します。