CSS基礎 練習問題 39：子孫セレクタ
HTMLにおいて、特定の要素の「内側にある」すべての要素に対してスタイルを適用する「子孫セレクタ」の正しい書き方はどれか。（例：div要素の中にあるすべてのp要素）
- div p { color: red; }
- div, p { color: red; }
- div > p { color: red; }
- div + p { color: red; }
- div ~ p { color: red; }
正解と解説を見る
正解：div p { color: red; }
特定の要素の中にあるすべての指定要素にスタイルを適用する子孫セレクタは「div p」のように半角スペースで区切ります。
【正解の理由】
セレクタとセレクタの間を半角スペースで区切る（例：`div p`）と、「div要素の内部にあるすべてのp要素」という意味になり、階層が深くても適用されます。
【不正解の理由】
• 「div, p { color: red; }」はカンマ区切りであり、div要素とp要素の「両方」に同じスタイルを適用する記述である
• 「div > p { color: red; }」は子セレクタであり、divの「直下」にあるp要素にしか適用されない
• 「div + p { color: red; }」は隣接兄弟セレクタであり、divの直後にあるp要素に適用される
• 「div ~ p { color: red; }」は一般兄弟セレクタであり、divの後ろにある同じ階層のp要素に適用される