CSS 相邻兄弟選択子

相邻兄弟選択子（Adjacent sibling selector）は、他の要素の後に続く要素を選択し、両者が同じ親要素を持つことができます。

相邻兄弟の選択

他の要素の後に続く要素を選択し、両者が同じ親要素を持つ場合、相邻兄弟選択子（Adjacent sibling selector）を使用できます。

例えば、h1要素の後に続く段落の上マージンを増やす場合、以下のように記述します：

h1 + p {margin-top:50px;}

この選択子は「h1要素の後に続く段落を選択し、h1要素とp要素が同じ親要素を持つ」と読みます。

自分で試してみる

文法説明

相邻兄弟選択子は加号（+）を使用しており、これは相邻兄弟結合記号（Adjacent sibling combinator）です。

注記：子結合記号と同様に、相邻兄弟結合記号の横に空白記号があります。

以下のドキュメントツリーの一部をご覧ください：

<div>
  <ul>
    <li>リストアイテム 1</li>
    <li>リストアイテム 2</li>
    <li>リストアイテム 3</li>
  </ul>
  <ol>
    <li>リストアイテム 1</li>
    <li>リストアイテム 2</li>
    <li>リストアイテム 3</li>
  </ol>
</div>

上記のスニペットでは、div要素に2つのリストが含まれています：1つの無序列表と1つの順序付きリスト、それぞれ3つのリストアイテムを含んでいます。これらのリストは相邻兄弟であり、リストアイテムも相邻兄弟です。ただし、1番目のリストのリストアイテムと2番目のリストのリストアイテムは相邻兄弟ではありません。なぜなら、これらのリストアイテムは同じ親要素に属していないからです（最大でも従兄弟に過ぎません）。

結合子を使うと、2つの相邻兄弟のうちの2番目の要素のみを選択できます。以下の選択子を見てください：

li + li {font-weight:bold;}

上記の選択子は、リストの2番目と3番目のリストアイテムのみを太字にします。1番目のリストアイテムは影響を受けません。

自分で試してみる

他の選択子と組み合わせる

相邻兄弟結合子は他の結合子と組み合わせられます：

html > body table + ul {margin-top:20px;}

この選択子は、table要素の直後に現れるすべての兄弟ul要素を選択します。このtable要素はbody要素に含まれており、body要素はhtml要素の子要素です。