CSS 複合セレクター

css 複合セレクタ

CSS 複合セレクター

説明：

この記事では、CSS 複合セレクターについて詳しく解説します。異なるセレクターを組み合わせて HTML 要素を正確に選択する方法を説明し、サンプルコードを使用して各複合セレクターの使用方法を示します。この記事では、子孫セレクター、子セレクター、隣接兄弟セレクター、汎用兄弟セレクターなど、さまざまな種類について説明し、各セレクターの用途を解説します。

1. CSS 複合セレクターとは？

CSS 複合セレクターとは、複数のセレクターを組み合わせて、要素間の関係に基づいて要素を選択する方法です。これにより、特定の要素の子要素、兄弟要素など、より具体的な要素を選択することができます。

主な複合セレクターは以下の通りです。

セレクター	説明
子孫セレクター ( )	指定した要素のすべての子孫要素を選択します。
子セレクター ( > )	指定した要素の直接の子要素を選択します。
隣接兄弟セレクター ( + )	指定した要素の直後の兄弟要素を選択します。
汎用兄弟セレクター ( ~ )	指定した要素の後にあるすべての兄弟要素を選択します。

2. 子孫セレクター

子孫セレクターは、スペースで区切られた2つのセレクターを使用します。最初のセレクターは祖先要素を、2番目のセレクターは子孫要素を表します。

構文:


祖先要素 子孫要素 {
  /* スタイル */
}

例:


<div class="container">
  <p>段落1</p>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
  </ul>
</div>

<style>
.container p {
  color: blue;
}
</style>

上記の例では、".container" クラスを持つ div 要素内のすべての子孫 p 要素のテキストの色が青に設定されます。

3. 子セレクター

子セレクターは、不等号記号 (>) で区切られた2つのセレクターを使用します。最初のセレクターは親要素を、2番目のセレクターは直接の子要素を表します。

構文:


親要素 > 子要素 {
  /* スタイル */
}

例:


<div class="container">
  <p>段落1</p>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
  </ul>
</div>

<style>
.container > ul > li {
  font-weight: bold;
}
</style>

上記の例では、".container" クラスを持つ div 要素の直接の子要素である ul 要素の直接の子要素である li 要素のテキストの太さが太字に設定されます。

4. 隣接兄弟セレクター

隣接兄弟セレクターは、プラス記号 (+) で区切られた2つのセレクターを使用します。最初のセレクターは参照要素を、2番目のセレクターは直後の兄弟要素を表します。

構文:


参照要素 + 隣接兄弟要素 {
  /* スタイル */
}

例:


<p>段落1</p>
<h2>見出し</h2>
<p>段落2</p>

<style>
h2 + p {
  margin-top: 20px;
}
</style>

上記の例では、h2 要素の直後にある p 要素の上マージンが 20px に設定されます。

5. 汎用兄弟セレクター

汎用兄弟セレクターは、チルダ (~) で区切られた2つのセレクターを使用します。最初のセレクターは参照要素を、2番目のセレクターは後続のすべての兄弟要素を表します。

構文:


参照要素 ~ 汎用兄弟要素 {
  /* スタイル */
}

例:


<ul>
  <li>リスト項目1</li>
  <li class="special">リスト項目2</li>
  <li>リスト項目3</li>
  <li>リスト項目4</li>
</ul>

<style>
li.special ~ li {
  color: gray;
}
</style>

上記の例では、".special" クラスを持つ li 要素の後にあるすべての li 要素のテキストの色が灰色に設定されます。

6. まとめ

この記事では、CSS 複合セレクターについて、子孫セレクター、子セレクター、隣接兄弟セレクター、汎用兄弟セレクターの4種類を中心に解説しました。これらのセレクターを理解し、適切に使い分けることで、より柔軟で効率的な CSS コーディングが可能になります。

複合セレクターを効果的に使用することで、HTML の構造を維持しながら、特定の要素のスタイルを正確に制御することができます。

説明：

目次

1. CSS 複合セレクターとは？

2. 子孫セレクター

3. 子セレクター

4. 隣接兄弟セレクター

5. 汎用兄弟セレクター

6. まとめ

関連Q&A