後続兄弟結合子

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

後続兄弟結合子 (subsequent-sibling combinator,~) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素があり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。

次の例では、後続兄弟結合子 (~) は、画像の兄弟であり、画像の後に現れる段落を選択し、スタイル設定するのに便利です。

css

img ~ p {  color: red;}

構文

css

/* 結合子の前後の空白はオプションですが、推奨されます。 */先行する要素 ~ 選択される要素 { スタイルプロパティ }

例

単純セレクターと結合子の使用

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

html

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

css

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 に一致します。

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

html

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

css

.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 の祖先に入れ子になっています。