1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. セレクター
  5. 次兄弟結合子

このページはコミュニティーの尽力で英語から翻訳されました。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

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

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

HTML

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

結果

直前の兄弟を選択

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

CSS

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

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

HTML

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

結果

仕様書

Specification
Selectors Level 4
# adjacent-sibling-combinators

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content