一般兄弟セレクタ

by 2 contributors:

概要

一般兄弟セレクタ (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.

仕様書

仕様書 策定状況 コメント
CSS Selectors Level 3 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート ? 1.0 (1.7 or earlier) 7 9 3
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

関連情報

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

Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す