隣接兄弟結合子

隣接兄弟結合子 (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 の定義
勧告 初回定義

ブラウザーの対応

BCD tables only load in the browser

関連情報