このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

次兄弟結合子

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

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

構文

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

CSS

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

HTML

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

結果

仕様書

Specification
Selectors Level 4
# adjacent-sibling-combinators

ブラウザーの互換性

関連情報