CSS の隣接兄弟結合子 (+) - ITチュートリアル

css 隣接セレクタ直前

CSS の隣接兄弟結合子 (+)

隣接兄弟結合子 (+) は、指定された要素の直後に続く兄弟要素を選択するために使用されます。これは、指定された要素の直後に現れる最初の兄弟要素のみを選択します。

構文

隣接兄弟結合子の構文は次のとおりです。


element1 + element2

次の例では、h1 要素の直後に続く p 要素を選択し、その色を赤に設定しています。


<h1>見出し</h1>
<p>この段落は赤になります。</p>
<p>この段落はデフォルトの色です。</p>

h1 + p {
  color: red;
}

隣接兄弟結合子は、直後に続く兄弟要素のみに作用します。次の例では、2 番目の p 要素は選択されません。


<h1>見出し</h1>
<p>この段落は赤になります。</p>
<p>この段落はデフォルトの色です。</p>

h1 + p + p {
  color: red;
}

隣接兄弟結合子は、同じ親要素を持つ兄弟要素のみに作用します。次の例では、div 要素内の p 要素は選択されません。


<h1>見出し</h1>
<p>この段落はデフォルトの色です。</p>
<div>
  <p>この段落もデフォルトの色です。</p>
</div>

h1 + p {
  color: red;
}

隣接兄弟結合子は、すべての主要なブラウザでサポートされています。

A: 隣接兄弟結合子 (+) は、指定された要素の直後に続く兄弟要素 **のみ** を選択します。一方、一般兄弟結合子 (~) は、指定された要素の後にある **すべて** の兄弟要素を選択します。

A: いいえ、適用できません。隣接兄弟結合子は、**同じ親要素を持つ兄弟要素** にのみ適用できます。

A: 他の CSS セレクタと同様に、隣接兄弟結合子はスタイルシートの **どの部分** でも使用できます。例えば、要素セレクタ、クラスセレクタ、ID セレクタなどと組み合わせて使用できます。