Your Search Results

    隣接セレクタ

    概要

    プラス記号 (+) のセレクタです。「隣接兄弟セレクタ」、または「隣接セレクタ」と呼ばれます。ある要素の直後に後続する要素にマッチします。

    構文

    former_element + target_element { style properties }
    

    以下の CSS を……

    li + li {
      color: red;
    }

    以下の HTML に適用した場合、

    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

    以下の様な表示結果となります。

    • One
    • Two
    • Three

    より実践的な例として、<img> の直後の、".caption" をクラス名として持つ <span> 要素にのみスタイルを適用する例を示します。

    img + span.caption {
      font-style: italic;
    }

    上記スタイルは、以下のマークアップに於ける span 要素にマッチします。

    <img src="photo1.jpg">
    <span class="caption">最初の写真</span>
    <img src="photo2.jpg">
    <span class="caption">二番目の写真</span>

    仕様

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

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート (有) (有) 7.0 (有) (有)
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ?
    注記:
    • Internet Explorer 7 では、セレクタに一致した要素の前に動的に要素を配置した際に、正しく表示が更新されません。
    • Internet Explorer 8 では、リンクのクリックにより要素が動的に挿入された場合、リンクがフォーカスを失うまで最初の子要素のスタイルが適用されません。

    関連情報

    Document Tags and Contributors

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