隣接セレクタ

この記事は翻訳作業中です。

概要

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

構文

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>

仕様

仕様書 策定状況 コメント
Selectors Level 4
next-sibling combinator の定義
草案  
Selectors Level 3
Adjacent sibling combinator の定義
勧告  
CSS Level 2 (Revision 1)
Adjacent sibling selectors の定義
勧告 Initial definition

ブラウザ実装状況

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

関連情報

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

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