blob: ed12db420a956d561439a8c2b1c939eb3dc4ef31 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
---
title: 一般兄弟結合子
slug: Web/CSS/General_sibling_combinator
tags:
- CSS
- リファレンス
- セレクター
browser-compat: css.selectors.general_sibling
translation_of: Web/CSS/General_sibling_combinator
---
{{CSSRef("Selectors")}}
**一般兄弟結合子** (general sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親{{Glossary("element", "要素")}}の子であるすべてのパターンに一致します。
```css
/* 任意の画像の兄弟で、
その画像より後方にある段落 */
img ~ p {
color: red;
}
```
## 構文
```css
先行する要素 ~ 選択される要素 { スタイルプロパティ }
```
## 例
### CSS
```css
p ~ span {
color: red;
}
```
### HTML
```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>
<span>And this is a red span!</span>
<code>More code...</code>
<div> How are you? </div>
<p> Whatever it may be, keep smiling. </p>
<h1> Dream big </h1>
<h2> that's all. </h2>
<span>And yet again this is a red span!</span>
```
### 結果
{{EmbedLiveSample("Examples", "auto", 300)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)
|
