隣接兄弟結合子 (adjacent sibling combinator, +) は2つのセレクターを接続し、同じ親要素の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

/* 画像の直後に来る段落 */
img + p {
  font-style: bold;
}

構文

直前の要素 + 対象の要素 { スタイルプロパティ }

CSS

li:first-of-type + li {
  color: red;
}

HTML

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

Result

仕様書

仕様書 策定状況 コメント
Selectors Level 4
next-sibling combinator の定義
草案 名前を「次の兄弟」結合子に変更。
Selectors Level 3
Adjacent sibling combinator の定義
勧告  
CSS Level 2 (Revision 1)
Adjacent sibling selectors の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7
補足
完全対応 7
補足
補足 Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector.
補足 In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.
Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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