後続兄弟結合子

Baseline Widely available

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

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

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

css
img ~ p {
  color: red;
}

構文

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

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

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

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 class="foo">
  <p>別の段落です。</p>
  <span>青い span</span>
  <div class="foo">
    <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 要素は、その .foop の兄弟である場合に選択されます。基本的には、どちらも .foo の祖先に入れ子になっています。

仕様書

Specification
Selectors Level 4
# general-sibling-combinators

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Subsequent-sibling combinator (A ~ B)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報