Webデザインをレベルアップさせる兄弟セレクターの活用術

2024-04-02

CSSセレクターにおけるプラス記号 (+) の意味

指定された要素の直後に続く兄弟要素
同じ親要素を持つ
要素の種類が一致する

例：

h1 + p {
  color: red;
}

上記のコードは、<h1> 要素の直後に続く <p> 要素を赤色にします。

注意点：

プラス記号 (+) は、直接隣接する兄弟要素のみを選択します。間に他の要素があると、選択されません。
空白文字は無視されます。
複数の兄弟要素を選択するには、カンマ (,) で区切ります。

その他の兄弟セレクター：

~ (一般兄弟セレクター)：同じ親要素を持つ、すべての兄弟要素を選択します。
>> (子孫セレクター)：指定された要素の子孫要素を選択します。

例題

以下のHTMLコードとCSSコードを例に、プラス記号 (+) の使い方を説明します。

HTMLコード：

<h1>見出し1</h1>
<p>これは段落1です。</p>
<p>これは段落2です。</p>
<h1>見出し2</h1>
<p>これは段落3です。</p>

CSSコード：

h1 + p {
  color: red;
}

結果：

<h1>見出し1</h1> 要素の直後に続く <p> 要素（これは段落1です。）のみが赤色になります。

プラス記号 (+) は、特定の要素の直後に続く兄弟要素を選択する便利なセレクターです。他の兄弟セレクターと組み合わせることで、より複雑なレイアウトを実現することができます。

<div class="container">
  <h1>見出し1</h1>
  <p>これは段落1です。</p>
  <p class="important">これは重要な段落です。</p>
  <p>これは段落2です。</p>
  <h1>見出し2</h1>
  <p>これは段落3です。</p>
</div>

.container h1 + p {
  color: red;
}

.container p + p.important {
  font-weight: bold;
}

.container 要素内にある <h1> 要素の直後に続く <p> 要素はすべて赤色になります。

その他のサンプル

ナビゲーションバーの項目にマウスオーバーしたとき、隣接する項目を強調表示する。
リストの奇数番目の項目に背景色を付ける。
見出しの直後に続く最初の段落にマージンを設定する。

プラス記号 (+) は、隣接する兄弟要素を選択する便利なセレクターです。さまざまなレイアウトやデザインを作成するために活用できます。

隣接兄弟要素を選択する他の方法

一般兄弟セレクター (~)

h1 ~ p {
  color: red;
}

プラス記号 (+) と異なり、間に他の要素があっても選択されます。

子孫セレクター (>>)

h1 >> p {
  color: red;
}

間に他の要素があっても選択されます。
深い階層の要素も選択されます。

JavaScript を使用して、隣接兄弟要素を選択することもできます。

const h1Elements = document.querySelectorAll('h1');

for (const h1Element of h1Elements) {
  const nextElement = h1Element.nextElementSibling;

  if (nextElement && nextElement.tagName === 'P') {
    nextElement.style.color = 'red';
  }
}