CSS 相邻兄弟セレクタ
説明
相邻兄弟セレクタ（+）は、特定の要素の直後に続く要素を選択する際に使用されます。ただし、選択される2つの要素は、同じ親要素の子要素である必要があります。
詳細
1. 構文
E + F {
/* スタイルプロパティ */
}
- E: 2番目の要素(F)の直前の兄弟要素である任意の要素を選択します。
- F: 1番目の要素(E)の直後の兄弟要素である任意の要素を選択します。
2. 使用例
<h2>警告</h2>
<p>これは重要なメッセージです。</p>
<p>この段落は選択されません。</p>
h2 + p {
color: red;
font-weight: bold;
}
上記の例では、「警告」という見出しの直後の段落が赤色で太字になります。
3. 他のセレクタとの比較
| セレクタ | 説明 |
|---|---|
+ (相邻兄弟セレクタ) |
特定の要素の直後に続く兄弟要素のみを選択します。 |
~ (一般兄弟セレクタ) |
特定の要素の後にあるすべての兄弟要素を選択します。 |
> (子セレクタ) |
特定の要素の直接の子要素のみを選択します。 |
4. 注意点
- 相邻兄弟セレクタは、前の兄弟要素ではなく、後の兄弟要素のみを選択します。
- 選択される2つの要素は、同じ親要素の子要素である必要があります。
5. ブラウザ対応
相邻兄弟セレクタは、すべての主要なブラウザでサポートされています。
参考文献
関連QA
Q1: 相邻兄弟セレクタと一般兄弟セレクタの違いは何ですか？
A1: 相邻兄弟セレクタ (+) は、特定の要素の直後に続く兄弟要素のみを選択します。一方、一般兄弟セレクタ (~) は、特定の要素の後にあるすべての兄弟要素を選択します。
Q2: 相邻兄弟セレクタは、前の兄弟要素を選択できますか？
A2: いいえ、相邻兄弟セレクタは、後の兄弟要素のみを選択し、前の兄弟要素は選択できません。
Q3: 相邻兄弟セレクタを使用する利点は何ですか？
A3: 特定の要素の直後の要素にのみスタイルを適用したい場合に便利です。例えば、警告メッセージの後に続く段落にのみスタイルを適用するなど、HTMLの構造を意識したスタイル付けが可能です。