mozilla
Your Search Results

    一般兄弟セレクタ

    概要

    一般兄弟セレクタ (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: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す