一般兄弟セレクタ

概要

一般兄弟セレクタ (general sibling selectors) では、「~」結合子を使います。「~」結合子は2つのセレクタの間に置き、第1セレクタと第2セレクタが共通の親要素を持つとき、第1セレクタにマッチする要素より後ろにある要素のうち、第2セレクタにマッチする要素を選択します。
【訳注: このセレクタは間接セレクタとも呼ばれます】

構文

element ~ element { style properties }

例

p ~ span {
  color: red;
}

次のマークアップに用いると

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

次のように表示されます。

This is not red.

Here is a paragraph.

Here is some code.And here is a span.

仕様書

ブラウザ実装状況

関連情報

• 隣接セレクタ