CSS セレクタ内のセレクタ
この記事では、HTML 要素をより正確にターゲットするために、CSS セレクタ内で異なるセレクタをネストまたは組み合わせる方法について説明します。
後代組み合わせ子（スペース）
2 つ以上のセレクタをスペースで区切って記述すると、最初のセレクタに一致するすべての要素の子孫要素のうち、2 番目以降のセレクタに一致する要素が選択されます。
- 子孫要素は直接の子要素である必要はなく、任意のレベルのネストが可能です。
- 例：
article pは、すべての<article>要素内の<p>要素を選択します。<p>要素のネストレベルは問いません。
<article>
<p>段落 1</p>
<div>
<p>段落 2</p>
</div>
</article>
上記の HTML コードでは、article p セレクタは両方の <p> 要素を選択します。
子組み合わせ子（>）
2 つのセレクタを > で区切って記述すると、最初のセレクタに一致するすべての要素の直接の子要素のうち、2 番目のセレクタに一致する要素が選択されます。
- 子孫組み合わせ子とは異なり、子組み合わせ子は直接の子要素のみを選択し、より深いレベルのネストされた要素は選択しません。
- 例：
ul > liは、<ul>要素の直接の子要素である<li>要素のみを選択します。<li>要素内にネストされた<li>要素は選択しません。
<ul>
<li>項目 1</li>
<li>項目 2
<ul>
<li>項目 2-1</li>
</ul>
</li>
</ul>
上記の HTML コードでは、ul > li セレクタは「項目 1」と「項目 2」の <li> 要素のみを選択します。「項目 2-1」の <li> 要素は選択しません。
隣接兄弟組み合わせ子（+）
2 つのセレクタを + で区切って記述すると、最初のセレクタに一致するすべての要素の直後の兄弟要素のうち、2 番目のセレクタに一致する要素が選択されます。
- 2 つの要素は同じ親要素を持つ必要があり、2 番目の要素は最初の要素の直後に配置されている必要があります。
- 例：
h2 + pは、すべての<h2>要素の直後に続く<p>要素を選択します。
<h2>見出し</h2>
<p>段落 1</p>
<p>段落 2</p>
上記の HTML コードでは、h2 + p セレクタは「段落 1」の <p> 要素のみを選択します。「段落 2」の <p> 要素は選択しません。
汎用兄弟組み合わせ子（~）
2 つのセレクタを ~ で区切って記述すると、最初のセレクタに一致するすべての要素の後にあるすべての兄弟要素のうち、2 番目のセレクタに一致する要素が選択されます。
- 隣接兄弟組み合わせ子とは異なり、汎用兄弟組み合わせ子は最初の要素の後にあるすべての兄弟要素を選択できます。要素が隣接している必要はありません。
- 例：
div ~ pは、すべての<div>要素の後にあるすべての<p>要素を選択します。要素間に他の要素があっても構いません。
<div>div 要素</div>
<p>段落 1</p>
<span>span 要素</span>
<p>段落 2</p>
上記の HTML コードでは、div ~ p セレクタは「段落 1」と「段落 2」の両方の <p> 要素を選択します。
列組み合わせ子
列組み合わせ子は、表内の列を選択するために使用されます。次の組み合わせ子があります。
| 組み合わせ子 | 説明 |
|---|---|
col |
ドキュメント内のすべての一致する列を選択します。 |
colgroup |
ドキュメント内のすべての一致する列グループを選択します。 |
例： table td:nth-child(2) は、表内の各行の 2 番目のセルを選択します。
<table>
<tr>
<td>セル 1</td>
<td>セル 2</td>
</tr>
<tr>
<td>セル 3</td>
<td>セル 4</td>
</tr>
</table>
上記の HTML コードでは、table td:nth-child(2) セレクタは「セル 2」と「セル 4」を選択します。
:is() 擬似クラスと :where() 擬似クラス
:is()擬似クラスは、セレクタリストを引数に取り、その中のいずれかのセレクタに一致する要素にスタイルを適用します。:where()擬似クラスは:is()と似ていますが、セレクタの特異性を計算する際に、:where()内のセレクタは無視されます。- 例：
:is(header, footer, aside)は、すべての<header>、<footer>、または<aside>要素を選択します。
<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>
上記の HTML コードでは、:is(header, footer, aside) セレクタは <header> と <footer> 要素を選択します。
関連 QA
- Q:
:is()擬似クラスと:where()擬似クラスの使い分けは？ - A: 特異性を考慮する必要がある場合は
:is()を、特異性を無視したい場合は:where()を使用します。 詳細は MDN Web Docs: :is() や MDN Web Docs: :where() を参照してください。 - Q: 列組み合わせ子は、どのバージョンから使用できますか？
- A:
colおよびcolgroupセレクタは、CSS2 からサポートされています。詳細については、W3C 勧告: 12. 列の選択 を参照してください。 - Q: 組み合わせ子を複数使用することはできますか？
- A: はい、可能です。複雑なセレクタを作成するために、複数の組み合わせ子を組み合わせることができます。ただし、セレクタが複雑になりすぎないように注意してください。