一般兄弟結合子 (general sibling combinator, ~
) は2個のセレクターを結びつけます。右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。
まず、右側のセレクタで選択される要素が、左側のセレクタで選択される要素より後に現れることです。(直後である必要はありません)
もうひとつは、これらの要素が同じ親要素(要素)をもつことです。
/* 任意の画像の兄弟で、
その画像より後方にある段落 */
img ~ p {
color: red;
}
構文
先行する要素 ~ 選択される要素 { スタイルプロパティ }
例
CSS
p ~ span {
color: red;
}
HTML
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<code>More code...</code>
<span>And this is a red span!</span>
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Selectors Level 4 subsequent-sibling combinator の定義 |
草案 | 名前を"subsequent-sibling combinator"に変更。 |
Selectors Level 3 general sibling combinator の定義 |
勧告 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。