前回の記事で基本のセレクタidセレクタとclassセレクタの書き方を記事にしました。今回も代表的なセレクタの記述方法、子孫セレクタの書き方を紹介します。
子孫セレクタの書き方
要素名やid名、class名を半角スペースで区切って記述することで子孫セレクタになります。半角スペースで区切った後に書いた要素は、前の要素の子孫（中に入っている、下の階層の）要素という意味になります。子孫要素なので、直下の子要素をとばして「親要素 孫要素」と書いても大丈夫です。
注意してほしいのが、子孫セレクタは直下の子要素を指定するものではなく、子孫ならすべて対象になる点です。「子要素にスタイルを適用するつもりが同じ条件を満たしている孫要素にも適用されてしまった」ということもあるので気を付けてください。
記述例
HTML
<section id="wrap">
<h2 class="sample">サンプル</h2>
<p class="sample">サンプルです。</p>
<div>
<p class="sample">これもサンプルです。</p>
</div>
</section>
CSS
#wrap .sample { color: red; }
h2要素や、div要素の中に入っているp要素も含め、全ての.sampleの要素の文字色が赤になります。
#wrap p.sample { color: red; }
#wrap直下のp要素と、div要素の中に入っているp要素の文字色が赤になります。
#wrap div .sample { color: red; }
div要素の中に入っているp要素の文字色が赤になります。
