【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説！

CSS のコードをシンプルかつ明瞭な構成にするために、隣接セレクタ・直下セレクタ・間接セレクタの利用は欠かせません。

絶対的に必要なものではありませんが、内容を理解すればとても便利な機能だとわかります。これらセレクタを使いこなすには、まず各々の仕組みをきちんと把握することから始めましょう。

専門用語が多く登場しますが、初心者でもきちんと内容が理解できるように分かりやすい例を挙げて解説していきます。

隣接セレクタとは

要素同士を結合子 [+] で結ぶことで、ある要素の後続に出現する隣の要素に対してスタイルを指定することができます。

さて、既に何を言っているのか分からなくなっていませんか？言葉の定義だけで理解するのはとても難しいので、HTML のソースを見ながら内容を確認していきましょう。

隣接セレクタの動作確認

<div class="family">
  <div class="parents">お父さん・お母さん
    <div class="child male">長男
      <div class="child male">長男の息子</div>
      <div class="child female">長男の娘</div>
    </div>
    <div class="child female">長女
      <div class="child male">長女の息子</div>
    </div>
    <div class="child male" id="you">次男（あなた）</div>
    <div class="child female">次女</div>
    <div class="child male">三男</div>
  </div>
</div>

タグ同士の親子関係がわかるような内容にしました。スタイルシートは次のように設定します。

/* 階層が分かりやすいように装飾 */
.family {
  border: 1px solid #999;
  padding: 20px;
}
.parents div {
  margin-left: 20px;
  line-height:1.9;
}

/* 隣接セレクタ */
#you + .child {
  font-size: 2em;
  font-weight: bold;
}

id 属性「you」つまり「次男（あなた）」と class 属性「child」を持つ要素を隣接セレクタで接続しました。この場合、どの位置にスタイルが反映されるでしょうか？

隣接セレクタ反映結果

「ある要素の後続に出現する隣の要素」をこの構造に合わせて噛み砕いて説明すると「あなたの直後に生まれた兄弟」になります。つまりここでは「次女」を指します。

もし「次男（あなた）」に年下の兄弟が居なければ、設定したスタイルシートが反映される要素はありません。

隣接セレクタの覚え方

名前の通り、条件を満たす隣の要素に対してスタイルを適用させるのが隣接セレクタになります。

間接セレクタとは

要素同士を結合子 [~] で結ぶことで、ある要素と同じ親要素に属する後続に出現する要素に対してスタイルを設定することができます。

こちらも先程の HTML を用いて確認しましょう。先程、隣接セレクタで結んだ部分を間接セレクタに置き換えます。

間接セレクタの動作確認

<div class="family">
  <div class="parents">お父さん・お母さん
    <div class="child male">長男
      <div class="child male">長男の息子</div>
      <div class="child female">長男の娘</div>
    </div>
    <div class="child female">長女
      <div class="child male">長女の息子</div>
    </div>
    <div class="child male" id="you">次男（あなた）</div>
    <div class="child female">次女</div>
    <div class="child male">三男</div>
  </div>
</div>

/* 階層が分かりやすいように装飾 */
.family {
  border: 1px solid #999;
  padding: 20px;
}
.parents div {
  margin-left: 20px;
  line-height:1.9;
}

/* 隣接セレクタ */
#you ~ .child {
  font-size: 2em;
  font-weight: bold;
}

id 属性「you」つまり「次男（あなた）」と class 属性「child」を持つ要素を間接セレクタで接続しました。

間接セレクタ反映結果

「ある要素と同じ親要素に属する後続に出現する要素」をこの構造に合わせて噛み砕いて説明すると「あなたの年下の兄弟全員」になります。つまりここでは「次女」と「三男」が対象になります。

もし「次男」ではなく「長男」に対して間接セレクタを設定した場合、スタイルが反映される対象は「長女」から「三男」までとなります。

間接セレクタの覚え方

隣接セレクタは隣り合うことが条件でしたが、間接セレクタは同一階層であれば離れていても反映されるのが特徴です。

直下セレクタとは

要素同士を結合子 [>] で結ぶことで、ある要素の直下にある要素に対してスタイルを設定することができます。

HTML はそのまま利用して、直下セレクタのスタイルを設定します。

直下セレクタの動作確認

<div class="family">
  <div class="parents">お父さん・お母さん
    <div class="child male">長男
      <div class="child male">長男の息子</div>
      <div class="child female">長男の娘</div>
    </div>
    <div class="child female">長女
      <div class="child male">長女の息子</div>
    </div>
    <div class="child male" id="you2">次男（あなた）</div>
    <div class="child female">次女</div>
    <div class="child male">三男</div>
  </div>
</div>

/* 階層が分かりやすいように装飾 */
.family {
  border: 1px solid #999;
  padding: 20px;
}
.parents div {
  margin-left: 20px;
  line-height:1.9;
}

/* 直下セレクタ */
.parents > .female {
  font-size: 2em;
  font-weight: bold;
}

class 属性「parents」と class 属性「female」を持つ要素を直下セレクタで接続しました。

直下セレクタ反映結果

「ある要素の直下にある要素」をこの構造に合わせて噛み砕いて説明すると「お父さん・お母さんの子供で女性」になります。つまりここでは「長女」と「次女」が対象になります。

よく見ると「長女の息子」にもスタイルが反映されていますが、これは親要素のスタイルをそのまま引き継ぐ CSS の仕様によるものです。

一方で「長男の娘」は class 属性「female」を持つものの、親要素「長男」には class 属性「parents」が設定されていないため対象外になります。

直下セレクタの覚え方

まとめ

スタイルシートでは div p .testclass{ /* スタイル */ } のようにスペースで区切りの階層を意識した設定しか出来ないように思われがちですが、隣接セレクタや間接セレクタを利用すれば、同じ階層にある要素に対して設定することができます。

また、スペース区切りでは中間の階層が幾重になっても関係なく適用されますが、直下セレクタを利用すれば階層の順番を意識しないと反映されません。

最後に簡単に各セレクタの特徴をまとめておきます。

隣接セレクタ・間接セレクタ・直下セレクタの比較表

これらのセレクタは、実際に使う機会がないと身につきません。慣れてしまえば本当に役立つものなので、じっくりと時間を掛けて使い方を覚えていきましょう。