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

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

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

「子孫結合子」って何？？

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

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

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

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

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

ふむふむ。

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

セレクターの箇所に書く「” “」半角空白のことを「子孫結合子」と呼びます。

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

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

「子孫結合子」の使い方！

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

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

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

なるほど！

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

header nav p {
    background-color: skyblue;
}

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

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

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

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

参考リンク。

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

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

あわせて読みたい記事。

まとめ

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

セレクターの箇所に書く「””」半角空白のことを「子孫結合子」と呼ぶ。

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

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

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

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

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

ではまた！