MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

隣接セレクタ

 

隣接兄弟セレクタ」、または「隣接セレクタ」と呼ばれます。ある要素の直後に後続する要素にマッチします。

構文

former_element + target_element { style properties }

li:first-of-type + li {
  color: red;
}
<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 の定義
勧告 初回定義

ブラウザ互換性

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

関連情報

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

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