隣接兄弟結合子

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

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

構文

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

例

CSS

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

HTML

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

結果

仕様書

Specification
Selectors Level 4
# adjacent-sibling-combinators

ブラウザーの互換性

BCD tables only load in the browser

関連情報