次兄弟結合子
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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Next-sibling combinator ( A + B ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.