【CSS】セレクターの「子結合子」について解説！【child combinator】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「子結合子」について解説します。

「子結合子」って何？？

このような方が対象です。

また、下の動画でも「子結合子」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそもCSSの「セレクター」とは何か？

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指します。

ふむふむ。

「子結合子」とは何か？（child combinator）

セレクターの箇所に書く「>」のことを「子結合子」と呼びます。

「子結合子」を使うことで「header要素」の直下の「div要素」のような限定的な指定が可能です。

※「子孫要素」ではなく「子要素」であることに注意です。

単体で成立するセレクターを「>」で区切って書いてあげる形にすればOKです！

「子結合子」の使い方！

header div {
    background-color: skyblue;
}
header > div {
    background-color: skyblue;
}

上の「header div」というセレクターだと、「header要素」の中の全ての「div要素」を選択するセレクターになります。

ですが下の「header > div」というセレクターは、「header要素」直下の「div要素」選択するセレクターになります。

なるほど！

「直下の」とは？

<header>
        <div>てきすと１</div>
        <div>
            <div>てきすと２</div>
            <div>てきすと３</div>
            <div>てきすと４</div>
        </div>
    </header>

header > div {
    background-color: skyblue;
}

上のようなコードだと、「てきすと１」だけの背景色が「skyblue」になります。

「header > div」は「header要素の子孫要素のdiv要素」ではなく、

「header要素の子要素のdiv要素」であることに注意してください。

「直下」とは「すぐ下」という意味ですね。

「子結合子」は組み合わせて使える

header > div > p {
    background-color: skyblue;
}

「子結合子」は組み合わせて使えます。

上のように書くと「header要素」の直下の「div要素」の直下の「p要素」というセレクターになります。

このように「子結合子」を使うことで単体で成立するセレクターを２個以上繋げて書くことが可能です。

このように「子結合子」を使うと限定的な指定をすることができます。

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#child-combinators

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator

あわせて読みたい記事。

まとめ

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指す。

セレクターの箇所に書く「>」のことを「子結合子」と呼ぶ。

「子結合子」を使うことで「header要素」の直下の「div要素」のような限定的な指定が可能。

「直下」とは「すぐ下」という意味。

「子結合子」は組み合わせて使える。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも「子結合子」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！