【CSS】チルダ記号(~)の完全解説！隣接する要素にスタイルを適用する方法

CSSセレクターにおけるチルダ記号(~)

例:

<div class="container">
  <h1>見出し</h1>
  <p>これは段落です</p>
  <p>これは別の段落です</p>
</div>

.container h1 ~ p {
  color: red;
}

この例では、.container要素の直後に存在するp要素のみが赤色で表示されます。h1要素とp要素の間には他の要素が存在しても構いませんが、h1要素とp要素が直接隣接している場合のみ、p要素にスタイルが適用されます。

チルダ記号の利点:

• 子孫要素を選択するよりも、より具体的なスタイル指定が可能
• 複雑なネスト構造のHTMLでも、簡潔なセレクターでスタイルを適用できる

• 隣接する要素のみを選択するため、間隔が空いている要素には適用されない
• すべてのブラウザでサポートされているわけではなく、古いブラウザでは動作しない可能性がある

その他のセレクターとの比較:

• 子孫セレクター (): すべての子孫要素を選択
• 隣接兄弟セレクター (+): 直接隣接する兄弟要素を選択

チルダ記号は、直接の子孫要素を選択するための間接セレクターです。隣接する要素にのみスタイルを適用したい場合に有効ですが、古いブラウザでは動作しない可能性がある点に注意が必要です。

<div class="container">
  <h1>見出し</h1>
  <p>これは段落です</p>
  <p>これは別の段落です</p>
</div>

.container h1 ~ p {
  color: red;
}

この例では、.container要素の直後に存在するp要素のみが赤色で表示されます。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
</ul>

ul li:nth-child(2) ~ li {
  background-color: yellow;
}

この例では、ul要素内の2番目のli要素の直後に存在するすべてのli要素が黄色で背景塗りつぶされます。

<div class="container">
  <p>これは段落です</p>
  <img src="image.png" alt="画像">
  <p>これは別の段落です</p>
</div>

.container p ~ img {
  border: 1px solid black;
}

これらのサンプルコードは、チルダ記号(~)の使用方法を理解するのに役立ちます。

チルダ記号(~)は、様々な状況で使用することができます。詳細については、以下の参考資料を参照してください。

子孫セレクター ()

• 利点: 最もシンプルで分かりやすい方法
• 欠点: 孫要素など、直接の子孫要素以外の要素も選択してしまう

.container h1 p {
  color: red;
}

• 利点: 直接隣接する兄弟要素のみを選択できる
• 欠点: 間隔が空いている要素には適用されない

.container h1 + p {
  color: red;
}

nth-child セレクター

• 利点: 特定の位置にある子孫要素を選択できる
• 欠点: 複雑なセレクターになりやすい

.container h1:nth-child(2) p {
  color: red;
}

JavaScript

• 利点: 複雑な条件に基づいて要素を選択できる
• 欠点: CSSよりも複雑な記述が必要

const container = document.querySelector('.container');
const h1s = container.querySelectorAll('h1');
for (const h1 of h1s) {
  const p = h1.nextElementSibling;
  if (p && p.tagName === 'P') {
    p.style.color = 'red';
  }
}

どの方法を使用するかは、状況によって異なります。シンプルさを重視する場合には子孫セレクター、特定の位置にある要素を選択したい場合はnth-childセレクター、複雑な条件に基づいて要素を選択したい場合はJavaScriptといったように、それぞれの方法の利点と欠点を理解した上で選択してください。

CSSで直接の子孫要素を選択するには、チルダ記号(~)以外にもいくつかの方法があります。それぞれの方法の利点と欠点を理解した上で、状況に合った方法を選択してください。