CSS基礎 練習問題 64：隣接する兄弟要素のセレクタ
HTMLにおいて、特定の見出し（h1）要素の「すぐ次（直後）」にある段落（p）要素だけを対象にスタイルを適用したい場合、隣接する兄弟要素を指定する正しいCSSセレクタの書き方はどれか。
- h1 + p
- h1 > p
- h1 ~ p
- h1 p
- h1 * p
正解と解説を見る
正解：h1 + p
特定の要素の「直後」にある兄弟要素だけを指定するには、隣接兄弟セレクタである「h1 + p」が正解です。
【正解の理由】
「+」を使うと、同じ階層に並んでいる要素のうち、指定した要素のすぐ次にある要素のみをピンポイントで対象にできます。見出しの直後の段落だけ余白を変えたい時などに便利です。
【不正解の理由】
• 「h1 > p」は子セレクタで、h1の「直接の内側（子要素）」にあるp要素を指定します
• 「h1 ~ p」は一般兄弟セレクタで、h1より後ろにある「すべて」の同じ階層のp要素を指定します
• 「h1 p」は子孫セレクタで、h1の「内側にあるすべて」のp要素（孫要素なども含む）を指定します
• 「h1 * p」は、h1の内側にある何らかの要素の、さらに内側にあるp要素を指定する書き方です