CSS 結合セレクター

CSSマニュアル

2023.04.23

CSS結合セレクター（combinators）は、複数のセレクターを組み合わせて、特定の要素を効果的に選択するためのものです。

結合セレクターには主に4つの種類があります。

子孫セレクター（descendant selector）

スペースで区切って表現されます。

例えば、A B というセレクターは、A要素の子孫要素であるB要素を選択します。

<style>
  div p {
    color: blue;
  }
</style>

<div>
  <p>このテキストは青色になります。</p>
</div>

子セレクターは、A > B のように、’>‘ を使って表現されます。

これは、A要素の直接の子要素であるB要素だけを選択します。

<style>
  div > p {
    color: red;
  }
</style>

<div>
  <p>このテキストは赤色になります。</p>
  <span><p>このテキストは赤色になりません。</p></span>
</div>

隣接兄弟セレクターは、A + B のように、’+‘ を使って表現されます。

これは、A要素の直後にあるB要素だけを選択します。

<style>
  h1 + p {
    font-size: 18px;
  }
</style>

<h1>タイトル</h1>
<p>このテキストはフォントサイズが18pxになります。</p>
<p>このテキストはデフォルトのフォントサイズになります。</p>

一般兄弟セレクターは、A ~ B のように、’~‘ を使って表現されます。

これは、A要素の後ろにあるすべてのB要素を選択します。

<style>
  h1 ~ p {
    font-weight: bold;
  }
</style>

<h1>タイトル</h1>
<p>このテキストは太字になります。</p>
<p>このテキストも太字になります。</p>

これらの結合セレクターを使って、HTML要素を柔軟に選択し、CSSのスタイルを適用することができます。要素の構造や関係性を理解し、効果的にデザインを調整するために役立ちます。