CSS セレクタ内のセレクタ

CSS セレクタの中にセレクター

CSS セレクタ内のセレクタ

この記事では、HTML 要素をより正確にターゲットするために、CSS セレクタ内で異なるセレクタをネストまたは組み合わせる方法について説明します。

後代組み合わせ子（スペース）

2 つ以上のセレクタをスペースで区切って記述すると、最初のセレクタに一致するすべての要素の子孫要素のうち、2 番目以降のセレクタに一致する要素が選択されます。


<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 番目のセレクタに一致する要素が選択されます。


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

上記の HTML コードでは、h2 + p セレクタは「段落 1」の <p> 要素のみを選択します。「段落 2」の <p> 要素は選択しません。

2 つのセレクタを ~ で区切って記述すると、最初のセレクタに一致するすべての要素の後にあるすべての兄弟要素のうち、2 番目のセレクタに一致する要素が選択されます。


<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(header, footer, aside) は、すべての <header>、<footer>、または <aside> 要素を選択します。


<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>

上記の HTML コードでは、:is(header, footer, aside) セレクタは <header> と <footer> 要素を選択します。