隣接セレクタ

概要

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

former_element + target_element { style properties }

以下の CSS を……

li + li {
  color: red;
}

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

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

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

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