次兄弟結合子

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

css

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

構文

css

/* 結合子の前後の空白はオプションですが、推奨されます。 */
直前の要素 + 対象の要素 { スタイルプロパティ }

この例は、次の兄弟要素が特定の型である場合に選択する方法を示しています。

最初の <li> の直後にある <li> のみにスタイル設定します。

css

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

html

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

次兄弟結合子は、直前の兄弟要素を選択するために、:has() 機能セレクター内に含めることができます。

<li> 要素の次の兄弟要素が <li> で、かつその型の中で最後の要素である場合にのみスタイル設定します。

css

li:has(+ li:last-of-type) {
  color: red;
  font-weight: bold;
}

html

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

仕様書
Selectors Level 4 # adjacent-sibling-combinators

このページは MDN の貢献者によって 2026年3月11日に最終更新されました。