次兄弟結合子

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

次兄弟結合子 (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

ブラウザーの互換性

BCD tables only load in the browser

関連情報