【65-2】結合子を使うセレクター（E F, E > F, E + F, E ~ F）

今回は「結合子」を使ったセレクターを使ってみよう。
単独で使えるセレクター同士を「結合子」でつなげば、よりピンポイントに要素を指定できます。

本日のINDEX

1. 結合子（Combinators）で要素をより詳しく指定する
   1. 子孫結合子（E F）は子孫全部が対象
   2. 子結合子（E > F）は子要素の場合のみ
   3. 隣接兄弟結合子（E + F）は兄弟同士で直後のものだけが対象
   4. 一般兄弟結合子（E ~ F）は兄弟同士であとにあるもの全部

参考：
・Selectors Level 4 | W3C Working Draft
・CSS セレクター | MDN

結合子（Combinators）で要素をより詳しく指定する

CSSで言う結合子（Combinators）とは記号のことです。
半角スペースや、「>」「+」「~」などの記号を使います。

複数のセレクターを この結合子と呼ばれる記号を使って組み合わせれば、単独で指定するよりもっとずっとピンポイントに指定する事ができます。

要素が入れ子になってる場合の「子孫要素」をセレクトするもの
・子孫結合子（E F）←半角スペースで区切っています
・子結合子（E > F）
同じ親をもつ「兄弟要素」をセレクトするもの
・隣接兄弟結合子（E + F）
・一般兄弟結合子（E ~ F）
があります。

子孫結合子（E F）は子孫全部が対象

子孫結合子（descendant combinator）は古くからある、最もよく使われる結合子ではないかな。「半角スペース」で要素名を区切りるアレです。

「半角スペース」で区切ることで、「◯要素の中の□要素全部（子も孫もひ孫も）」というセレクターになります。
どんなに入れ子になっていようと、子々孫々ず〜っと全部適用されます。

例えば下記のように書けば、<main>要素の中にある <p>要素全部 を対象にしたセレクターです。

main p {
  margin: 0 0 3em;
}

ちょっと実験してみます。
下記のCSSは、クラス名を「comb」と付けた<div>要素の子孫の<span>要素すべてが対象になります。文字色をグリーンに指定しました。

div.comb span {
  color:green;
}

HTMLはこちら。
<div>要素を曾孫の代まで作り、それぞれに<span>要素も入れてます。

<div class="comb">
子孫結合子は子孫全部が対象。<span>これはdivの子供のspan要素</span>
  <div>
  ここは入れ子のdiv要素。<span>これはdivの孫のspan要素</span> 
    <div>
    ここはさらに入れ子のdiv要素。<span>これはひ孫のspan要素</span>
    </div>
  </div>
</div>

このようにプレビューします。子も孫も曾孫も全部グリーンですね。

See the Pen Untitled by yuki★hata (@yuki__hata) on CodePen.

HTMLで すっごい深い階層にするって、よほどの事情が無い限りやらないので、たいていはこの子孫結合子で十分な場合が多いと思う。
それでも「子要素は指定したいけど、孫には指定したくない」場合もあるよね。
そんなときは、次の↓子結合子を使えば解決です。

子結合子（E > F）は子要素の場合のみ

子結合子（child combinator）は「>（大なり記号）」で区切ります。
これは子要素だけセレクターにします。
さっきの子孫結合子と違って、孫や曾孫には影響しない。子要素だけ全部。

さっきのサンプルと HTMLは全く同じで、
CSSのセレクターだけこの子結合子にしてみた。

div.comb > span {
  color:green;
}

プレビューはこちら。子要素だけ影響して、孫やひ孫には適用されませんね。

See the Pen 子結合子TEST by yuki★hata (@yuki__hata) on CodePen.

ちなみに、子要素が複数あれば、その全部が対象になります。
先程のHTMLをこのように<span>要素を足してみたら。

<div>
子孫結合子は子孫全部が対象。<span>これはdivの子供のspan要素</span>。
ちょっとテキストをたしてみて、<span>これも子要素</span>
  <div>
  ここは入れ子のdiv要素。<span>これはdivの孫のspan要素</span> 
    <div>
    ここはさらに入れ子のdiv要素。<span>これはひ孫のspan要素</span>
    </div>
  </div>
ここにもテキストをたしてみて、<span>これも子要素のspan</span>
</div>

プレビューはこちら。<span>が「子」なら対象になります。

See the Pen 子結合子TEST2 by yuki★hata (@yuki__hata) on CodePen.

隣接兄弟結合子（+）は兄弟同士で直後のものだけが対象

上記までは「子や子孫」が対象でしたが、ここからは「兄弟」が対象です。

隣接兄弟結合子（adjacent sibling combinator）は「+（プラス記号）」で区切ります。
これは直後の兄弟要素だけをピンポイントで指定できます。
「セットで使うことが多い兄弟要素同士」のスタイル指定をするのに便利です。

小見出し（<h3>要素など）と段落（<p>要素）の組み合わせって多いですよね。
下記のようにHTMLを組んでみました。<h3>要素と<p>要素は全員兄弟です。

<div>
  <h3>小見出し h3要素</h3>
  <p>段落 p要素 テキストテキスト</p>
  <h3>小見出し h3要素</h3>
  <p>段落 p要素 テキストテキスト</p>
  <p>段落 p要素 テキストテキスト</p>
</div>

段落どうしのマージンは大きくしたいけど、小見出しと段落の間はそんなに大きいと変。 ですので CSSで、<h3>要素の直後の<p>要素のみ 上マージンを0にしてみた。
こんな時に h3 + p と書けばOK。

h3 {
  margin:2em 0 0;
  color:palevioletred;
  }
p {
  margin:2em 0;
  }
h3 + p {
  margin-top:0;
  }

普段の<p>要素は、上下のマージンは2emで左右は0だけど（6行目）、<h3>要素の直後の<p>要素だけは上マージンを0（8〜9行目）にしています。
★マージン指定は→【11-1】marginと marginのショートハンド
★上下マージンを2emにすると、<p>要素どうしの間は4emになる？→なりません 2emです。
　これをマージンの相殺といいます→【11-4】marginの相殺（margin collapsing）

で、プレビューはこちら。

See the Pen CodePen Home 隣接兄弟結合子TEST by yuki★hata (@yuki__hata) on CodePen.

一般兄弟結合子（E ~ F）は兄弟同士であとにあるもの全部

一般兄弟結合子（general sibling combinator）は「~（チルダ）」で区切ります。
これはあとで出てくる兄弟要素すべてを指定します。直後じゃなくてもOKで、あとで出てくるもの全部。

さっきの隣接兄弟のサンプルで、いちばん最初の<h3>要素の上がパカっと空いててイヤですね。これは<h3>要素の上マージンを 2em に指定しているから。
そこで CSSでこのようにしてみた。

h3 {
 margin:0;
}
h3 ~ h3 {
 margin:2em 0 0;
}

<h3>要素にまずマージン0の指定をしておいて、<h3>要素のあとに出てくる<h3>要素全部は上マージン2emという指定にします。

プレビューはこちら。

See the Pen 一般兄弟結合子TEST by yuki★hata (@yuki__hata) on CodePen.

上のサンプルは同じ要素で（h3 ~ h3）一般兄弟結合子を使ってますが、もちろん違う要素どうしでの組み合わせもOK。
<h3>要素の前に<p>要素を置いて、<h3>のあとにある<p>要素のスタイルとは違うものにしてみます。

p { /*これはh3要素の前のpに適用されます*/
  color:darkcyan;
  border:1px dotted #ccc;
  padding:.5em;
  margin-top:0;
}
h3 ~ p { /*これはh3要素のあとに出てくるpに適用されます*/
  color:#666;
  border:none;
  padding:0;
  margin:2em 0;
}

プレビューはこちら。

See the Pen 一般兄弟結合子TEST2 by yuki★hata (@yuki__hata) on CodePen.

<h3>の前にある<p>要素だけスタイルが変わっていますね。
これは例えば、ページの導入部の「前置き」とかだけスタイルを変えたい時に便利です。

次回予告

結合子は今回だけで終わり。シンプルなのでぜひ覚えておきたいですね。

次回から属性セレクターを使ってみよう。
属性セレクターは、要素の「属性」の名前や値がどうなっているかでセレクトできます。
種類が多いので、3〜4回くらいに記事を分ける予定です。
次回はまず、[foo] [foo="bar"] [foo~="bar"] [foo|="en"] の4種類を見てみましょう。