一般兄弟結合子 (general sibling combinator, ~) は2つのセレクターを接続し、同じ親要素の子同士であって、1つ目の要素の後にある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 の定義
草案 名前を「続く兄弟」結合子に変更。
Selectors Level 3
general sibling combinator の定義
勧告 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121793
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

関連情報

ドキュメントのタグと貢献者

このページの貢献者: SphinxKnight, mfuji09, ethertank, sosleepy
最終更新者: SphinxKnight,