icon
icon

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

初心者向けにCSSの隣接・直下・間接セレクタの違いについて解説しています。セレクタはスタイルを適用させる要素を指定するものです。CSSの記述の基本となるので、必ず構造を理解しておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

 

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

 

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

 

田島悠介

今回は、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コースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

CSSの隣接・直下・間接セレクタの違いについてわかって良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

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

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