結合子

子孫結合子

子孫結合子 (descendant combinator) は、単一の空白（ ）文字で表され、2 つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、 2 番目のセレクターと一致する要素が選択されるようにします。 子孫結合子を利用するセレクターは、子孫セレクターと呼ばれます。

body article p {
}

以下の例は、 .box クラスのついた要素の内部にある <p> 要素のみに一致します。

<div class="box"><p>.box の中のテキスト</p></div>
<p>.box の外のテキスト</p>

.box p {
  color: red;
}

子結合子

子結合子 (child combinator, >) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターで一致した要素のうち、最初のセレクターで一致した要素の直接の子要素にのみ一致します。さらに下の階層の要素には一致しません。例えば、 <article> 要素の直接の子である <p> 要素のみを選択するためには、次のようにします。

article > p {
  /* … */
}

次の例では、順序付きリスト（<ol>）が順序なしリスト（<ul>）内に含まれています。子結合子は <ul> の直接の子である <li> 要素のみを選択し、それらに上部の境界線を適用します。

<ul>
  <li>順序なしアイテム</li>
  <li>
    順序なしアイテム
    <ol>
      <li>アイテム 1</li>
      <li>アイテム 2</li>
    </ol>
  </li>
</ul>

ul > li {
  border-top: 5px solid red;
}

前の例で、子セレクターとして指定している > を削除すると、子孫セレクターになり、すべての <li> 要素に赤い境界線が表示されます。

次兄弟結合子

次兄弟結合子 (next-sibling combinator, +) は 2 つの CSS セレクターの間に配置されます。2つ目のセレクターに一致する要素のうち、最初のセレクターの次の兄弟要素であるものだけに一致します。例えば、<p> 要素の直後に来るすべての <img> 要素を選択するためには、次のようにします。

p + img {
  /* … */
}

一般的な用途としては、次の例のように見出しに続く段落に何かをすることです。ここでは、<h1> と親要素を共有し、かつその <h1> の次の段落を選択します。

<article>
  <h1>見出し</h1>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

body {
  font-family: sans-serif;
}

h1 + p {
  font-weight: bold;
  background-color: #333333;
  color: white;
  padding: 0.5em;
}

前の例で次のことを試してみましょう。

1. <h2> などの別の要素を <h1> と <p> の間に挿入してみてください。そうすると、段落がセレクターと一致しなり、隣接する要素に対して背景色と前景色が取得されなくなることがわかります。
2. これで、h1 + p セレクターを変更し、特別なスタイルがまず最初の段落に再度適用されるようにします。

後続兄弟結合子

要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、後続兄弟結合子 (subsequent-sibling combinator, ~) を使うことができます。 <p> 要素の後のどこかに来る <img> 要素をすべて選択するには、次のようにします。

p ~ img {
  /* … */
}

以下の例では、<h1> の後に続くすべての <p> 要素を選択しています。また、ドキュメントに <div> がある場合でも、その後にある <p> が選択されています。

<article>
  <h1>見出し</h1>
  <p>これは段落です。</p>
  <div>これは div です</div>
  <p>これは他の段落です。</p>
</article>

body {
  font-family: sans-serif;
}

h1 ~ p {
  font-weight: bold;
  background-color: #333333;
  color: white;
  padding: 0.5em;
}

結合子とセレクターの組み合わせ

以前のレッスンで学んだセレクターは、結合子と組み合わせて文書の一部を選択できます。例えば、<ul> の直接の子要素であり、class が a のリストアイテムを選択するには、次のように指定してみてください。

ul > li[class="a"] {
}

しかし、文書の特定の部分を選択するセレクターの大きなリストを作成するときには注意してください。マークアップ内の要素の位置にとても固有のセレクターを作成したため、 CSS ルールを再利用することが難しくなります。

単純なクラスを作成し、それを対象の要素に適用する方が多いでしょう。とはいえ、結合子の知識は、文書内の何かをスタイル設定する必要があるときに、おそらく CMS によって生成された HTML にアクセスすることができない場合に、とても有益なものになるでしょう。

まとめ

セレクターの説明は以上です。次は、CSS セレクターに関する情報をどれだけ理解し、記憶できたかを調べるための確認テストを用意しました。

• 前のページ
• Overview: CSS によるスタイル設定の基本
• 次のページ