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