CSSの隣接・直下・間接セレクタの違いを現役エンジニアが解説【初心者向け】

CSSの隣接・直下・間接セレクタの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

隣接セレクタとは

隣接セレクタとは、基準要素の隣の要素を指定するためのセレクタです。

CSSでは以下のように記述します。

HTML

<span>1</span>
<span>2</span>
<span id="me">3</span>
<span>4</span>
<span>5</span>

CSS

#me + span { background: gold; }
/* #meの隣にあるspan */

実行結果
4の背景色がgoldになります。

 

直下セレクタとは

直下セレクタとは、基準要素の1つ下にある子要素を指定するためのセレクタです。

CSSでは以下のように記述します。

HTML

<div id="me">
  <span>1</span>
  <div>
    <span>2</span>
    <span>3</span>
  </div>
</div>

CSS

#me > span { background: gold; }
/* #meの直下にあるspan */

 

実行結果
1の背景色がgoldになります。

 

[PR] Webデザインで副業する方法とは

間接セレクタとは

間接セレクタとは、基準要素以降にある要素を指定するためのセレクタです。

HTML

<span>1</span>
<span>2</span>
<span id="me">3</span>
<span>4</span>
<span>5</span>

CSS

#me ~ span { background: gold; }
/* #me以降にあるspan */

実行結果
4と5の背景色がgoldになります。

 

それぞれのセレクタの活用場面

HTMLの構造や要素間の関係から特定の要素を選択できます。

そのため、HTMLにclassやidが付いていなくても選択可能です。

システムで自動的に出力されるHTMLなど、自分で自由にHTMLを書くことができない場合でもCSSでスタイルを設定できます。

HTML

<section>
  <h1>タイトル</h1>
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
  <ul>
    <li>リスト1
      <p>リストの中のテキスト</p>
    </li>
    <li>リスト2
      <p>リストの中のテキスト</p>
    </li>
  </ul>
  <p>テキスト4</p>
</section>

CSS

section > p{ color: tomato; }
h1 + p{ color: gold; }
ul ~ p { color: limegreen; }

実行結果

このコードではp要素にclassやidは付いていないものの、CSSの隣接セレクタや直下セレクタ、間接セレクタを使って色を変えました。

直下セレクタを使って、section要素の直下にあるp要素を赤色にしました。

section要素の直下にあるp要素のみに適用されるので、リスト内にあるp要素の色は変わっていません。

隣接セレクタを使ってh1要素の次にあるp要素のみを黄色に、間接セレクタを使ってリストよりも後にあるp要素を緑色にしました。

HTMLの構造を見極めてセレクタを使ってみましょう。

 

執筆してくれたメンター

メンター 橋本真理 フリーのweb/グラフィックデザイナー。 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。