隣接兄弟結合子 (+
) は2つのセレクターを接続し、同じ親要素
の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。
/* 画像の直後に来る段落 */
img + p {
font-style: bold;
}
構文
直前の要素 + 対象の要素 { スタイルプロパティ }
例
CSS
li:first-of-type + li {
color: red;
}
HTML
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
Result
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Selectors Level 4 next-sibling combinator の定義 |
草案 | 名前を「次の兄弟」結合子に変更。 |
Selectors Level 3 Adjacent sibling combinator の定義 |
勧告 | |
CSS Level 2 (Revision 1) Adjacent sibling selectors の定義 |
勧告 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser