隣接セレクタ

概要

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

構文

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 では、リンクのクリックにより要素が動的に挿入された場合、リンクがフォーカスを失うまで最初の子要素のスタイルが適用されません。

関連情報

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

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