隣接兄弟セレクタ
Coddyの「CSSセレクター」コースのレッスン 9/15。
隣接兄弟セレクタについて詳しく見ていきましょう。これらのセレクタは、同じ親を共有し、選択された要素の直後に来る要素をターゲットにします。隣接兄弟セレクタは、指定された要素の兄弟であり、かつその直後に隣接しているすべての要素を選択するCSSセレクタです。隣接兄弟セレクタは、2つのセレクタの間にプラス記号（+）を置くことで表されます。
構文
former_element + target_element {
/* style properties */
}次のようなHTML構造があるとします：
<div class="container">
<p>First paragraph</p>
<span>Adjacent span</span>
<p>Second paragraph</p>
</div>段落の直後にある <span> にスタイルを適用するには、隣接兄弟セレクタを使用します：
p + span {
font-weight: bold;
}この例では、"Adjacent span" のフォントが太字になります。
チャレンジ
簡単p要素とspan要素を持つウェブページを作成してください。- 隣接セレクタを使用して、
p要素の直後に隣接するspan要素に「red」のボーダー（境界線）を設定するスタイルを適用してください。
自分で試してみよう
<html>
<head>
<title>Adjacent Sibling Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>