後続兄弟結合子

この例では、両方のセレクターが単純セレクター（p と span）である場合に、 ~ 結合子を使用する場合を示しています。

<article>
  <span>これは段落の前に現れるので赤にはなりません。</span>
  <p>ここに段落があります。</p>
  <code>ここに code があります。</code>
  <span>
    この span が赤いのは、間に他のノードがあるにもかかわらず、段落の後に現れるからです。
  </span>
  <p>何かあっても、笑顔を絶やさないでください。</p>
  <h1>夢は大きく</h1>
  <span>
    ノードの数や種類に関係なく、段落の後の同じ親からの span はすべて赤くなります。
  </span>
</article>
<span>
  この span は段落と親を共有していないので赤ではありません。
</span>

p ~ span {
  color: red;
}

この例には2つの複合セレクターがあり、どちらも後続兄弟結合子 .foo p ~ span と .foo p ~ .foo span を使用しています。

• 最初の複合セレクターである .foo p ~ span は、もし span と段落の親が同じで、かつその親またはその親の祖先がクラス .foo を持っている場合、段落の後に来るすべての span に一致します。
• 2 つ目の複合セレクター .foo p ~ .foo span は、クラス .foo を持っている要素の子孫であるすべての span に一致します。

下記の例は、複合セレクターの対象要素は、複合セレクターの初期要素と同じ親を示さなければならないことを示しています。

<h1>夢は大きく</h1>
<span>またしても赤い span です！</span>
<div class="foo">
  <p>別の段落です。</p>
  <span>青い span</span>
  <div class="foo">
    <span>緑の span</span>
  </div>
</div>

.foo p ~ span {
  color: blue;
}

.foo p ~ .foo span {
  color: green;
}

上の HTML では、.foo p の兄弟は span と .foo です。緑色の span は .foo クラスの子孫で、p の兄弟です。

• 対象セレクターが span の場合、p の兄弟である span 要素が選択されます。 p 要素は .foo の子孫であるため、その span 兄弟要素も選択されます。
• .foo p ~ .foo span では、対象とするセレクターは .foo の子孫である span です。この場合、 .foo の子孫である span 要素は、その .foo が p の兄弟である場合に選択されます。基本的には、どちらも .foo の祖先に入れ子になっています。

• 次兄弟結合子