一般兄弟結合子

一般兄弟結合子 (general sibling combinator, ~) は2個のセレクターを結びつけます。右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。

まず、右側のセレクタで選択される要素が、左側のセレクタで選択される要素より後に現れることです。(直後である必要はありません)

もうひとつは、これらの要素が同じ親要素(要素)をもつことです。

/* 任意の画像の兄弟で、
   その画像より後方にある段落 */
img ~ p {
  color: red;
}

構文

先行する要素 ~ 選択される要素 { スタイルプロパティ }

CSS

p ~ span {
  color: red;
}

HTML

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<code>More code...</code>
<span>And this is a red span!</span>

結果

仕様書

仕様書 状態 備考
Selectors Level 4
subsequent-sibling combinator の定義
草案 名前を"subsequent-sibling combinator"に変更。
Selectors Level 3
general sibling combinator の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
General sibling combinator (A ~ B)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7Opera 完全対応 9Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報