CSS

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サイトを公開できる、オンラインブートキャンプを開催しています。

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

CSSのflexで内容に合わせて高さを変える方法【初心者向け】

CSSのflexで内容に合わせて高さを変える方法について解説します。flexboxではデフォルトで高さが揃った状態で表示されますが、内容に応じて表示するようにし...

CSS

CSSで最後の要素を除いて適用させる方法【初心者向け】

CSSで最後の要素を除いて適用させる方法について解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさ...

CSS

selectとoptionをCSSでカスタマイズする方法を現役エンジニアが解説【初心者向け】

select optionをCSSでカスタマイズする方法についてテックアカデミーのメンター（現役Webデザイナー）が初心者向けに解説します。目次 ...

CSS

CSSのnormalize.cssの使い方を現役エンジニアが解説【初心者向け】

CSSのnormalize.cssの使い方について解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について...

CSS

SCSSでのif文で条件分岐をする方法を現役エンジニアが解説【初心者向け】

SCSSでのif文で条件分岐をする方法について解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読...

CSS

CSSで"cursor: pointer"が効かない原因と対処方法を現役エンジニアが解説【初心者向け】

CSSで”cursor: pointer”が効かない原因と対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向け...

CSS

あわせてよく読まれている記事

CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】

CSSのnth-of-typeとnth-childの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 nth-of-typeとnth-childの違いについて詳しく説明していくね！大石ゆかりお願いします！ nth-of-typeについて nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似要素です。擬似要素とは、指定した要素の一部にCSSを反映できる方法のことほ指します。以下、コード例です。 //兄弟関係にあるのうちx番目のを選択 span:nth-of-type(x){ 〜 } 要素の数だけを数えて、x番目の要素のみを選択します。 nth-childについて nth-childとは、指定した全ての要素の中でx番目にある指定の要素を選択する擬似要素です。 //と兄弟関係にある、全ての要素の中でx番目にあるを選択 span:nth-child(x){ 〜 } 兄弟関係にある全ての要素を数えるため、x番目にある要素がではない場合、適用できません。 [PR] Webデザインで副業する方法とは2つの違い nth-childとnth-of-typeはx番目の要素を選択するのでとてもよく似ているものの、指定の要素以外の要素を数えるか、数えないかという違いがあります。下記のようなHTMLで考えた場合、 <div> 1 2 3 </div> span:nth-child(2)もspan:nth-of-type(2)も2を選択します。しかし、例えば下記のようなHTMLの場合には、span:nth-child(2)は、を1番目と数えるので、1を選択し、span:nth-of-type(2)はだけを数えるので、2を選択します。 <div> Number 1 2 3 </div> 次は下記のようなHTMLで考えてみましょう。 HTML <html> <head> <meta charset="utf-8"> <title>nth-of-typeとnth-of-child</title> </head> <body> <ul> <li> <h2>List01</h2> 01 02 03 04 05 </li> <li> <h2>List02</h2> 06 07 08 09 10 </li> <li> <h2>List03</h2> 11 12 13 14 15 </li> </ul> </body> </html> CSS body{ margin:30px; font-size:20px; font-weight:bolder; } ul{ list-style:none; } li{ display:flex; } h2{

CSS

3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】

3の倍数などn番目の要素だけCSSをスタイルする方法について解説します。これができると規則的にデザインを変更することができるので、個別でCSSを設定するという手間が省ける上に、可読性の高いコードとなります。ぜひ参考にしてみてください。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 3の倍数などn番目の要素だけCSSをスタイルする方法について詳しく説明していくね！大石ゆかりお願いします！疑似クラスの説明と使い方通常、CSSのセレクタでは、HTMLタグやクラス名、id名で指定して、デザインを作っていきますが、擬似クラスでは、指定された要素の状態や、条件を追加することができます。例えば、マウスがのっている時だけに適用させたい場合は、タグ名:hoverとします。 CSS： a:hover{ color:red; } このように、条件や状態を追加することができる擬似クラスはたくさんあります。 :active／アクティブ状態 :visited／訪問済みのリンク :focus／<input>などの要素が入力状態 :checked／checkboxなどでチェックされている状態 :first-child／最初の子要素 :nth-child／親要素の中で、全ての子要素の内、x番目の子要素 :nth-of-type／親要素の中で、x番目の子要素などなど、まだいっぱいあります。 3の倍数の要素にスタイルを適用する方法 3の倍数の要素にスタイルを適用するには、x番目の要素を選択できる :nth-of-type を使用します。HTMLで、余分なクラス名をつけることなく、CSSだけで適用できます。 HTML： <html> <head> <meta charset="utf-8"> <title>nth-of-typeを使ってみよう</title> </head> <body> 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </body> CSS： @charset "UTF-8"; /*文字コードの指定*/ body{ display:flex; flex-wrap:wrap; margin:30px; font-size:20px; font-weight:bolder; } span{ display:block; width:100px; height:100px; margin:5px; background:gold; } このうち、3の倍数のボックスのみをグリーンに変えるには、下記のように書きます。 span:nth-of-type(3n){ background: limegreen; } span:nth-of-type(3n)は、3×n番目のという意味です。nは自然数なので、3×n番目 = 3の倍数番目ということになります。 [PR] Webデザインで副業する方法とはn番目の要素にスタイルを適用する方法 nth-of-type()の()の中には、3nだけでなく、好きな数字を入れてx番目の要素を選択することができます。10番目のボックスの色を赤にするには、 span:nth-of-type(10){ background:tomato; } と書きます。疑似クラスを使ってみようこのように、nth-of-typeを使えば、好きな番号のボックスの色をCSSだけで変更することができます。また、偶数番目のボックスの文字色を白にする場合：span:nth-of-type(2n){ color:white; } 奇数番目のボックスの文字色を赤にする場合：span:nth-of-type(2n+1){ color:tomato;

CSS

PythonのSyntaxErrorの解決方法を現役エンジニアが解説【初心者向け】

PythonのSyntaxErrorの解決方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PythonのSyntaxErrorの解決方法について詳しく説明していくね！大石ゆかりお願いします！ PythonのSyntaxErrorの主な種類、読み方、原因プログラミングを行っていると多くのエラーに遭遇します。その中でも代表的なものが「SyntaxError」です。 SyntaxError は直訳すると文法エラーという意味で「シンタックスエラー」と読みます。SyntaxErrorは、プログラムが文法的に正しくないと判断された場合に発生します。判断はプログラムを実行する前に行われるのでSyntaxErrorを解消しないとプログラムを実行することができません。それではSyntaxErrorはどのような場合に発生するのでしょうか。いくつか例をあげて確認してみましょう。まずは正常に動作するプログラムのソースコードです。 for i in range(1,10): print("*" * i) 実行結果は以下のようになります。 * ** *** **** ***** ****** ******* ******** ********* それでは、for文の「:」を忘れた場合はどうなるでしょうか？ for i in range(1,10) print("*" * i) 実行結果は以下のようになります。ちょうど「:」に該当する部分でSyntaxErrorが発生していることが分かります。 File "<ipython-input-2-80458efb33d9>" , line 1 for i in range(1,10)

Python

jQueryでappendメソッドを使って要素を追加する方法【初心者向け】

JavaScriptのライブラリであるjQueryでappendを使って要素を追加する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 jQueryでappendメソッドを使って要素を追加することで、表示結果を変えられます。実務でもjQueryでappendメソッドを使って要素を追加して、ユーザーの操作に応じて表示結果を変えるため、ぜひ学習してみてください。 Webデザインをしていて、ユーザーがボタンを押すと何か表示したい、追加したいといった要望が出ることがよくあります。そんな時に役に立つのがappendメソッドです。今回はそんなappendメソッドについて解説していきたいと思います。目次隣接セレクタとは直下セレクタとは間接セレクタとはそれぞれのセレクタの活用場面執筆してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 appendメソッドとは appendメソッドは、HTML要素を動的に追加できるメソッドです。 appendメソッドを使用すれば、ほんの数行でHTML要素を追加できるためとても便利です。例えば、ユーザーがボタンをクリックした操作に応じて、Webサイトの表示を変化させることが可能です。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！ある要素のCSSを変更する方法はわかったのですが、要素を追加する方法ってありますか？田島悠介もちろん。要素の追加・新規作成・削除・変更があるね。大石ゆかりたくさんあるんですねー。田島悠介だいたいそういうのがあるって覚えるといいよ。では、要素を追加してみよう！ appendメソッドの書き方 appendメソッドはとても簡単に書くことができます。基本の書き方次のように、セレクタでクラス・ID指定をした後に、appendを呼び出し、追加するものを指定します。 $("セレクタ").append("追加するもの"); 複数の要素を追加する書き方次のように追加するものへ複数の要素を指定することで、複数の要素の追加もできます。 $("セレクタ").append('<li>リスト1</li><li>リスト2</li><li>リスト3</li>') [PR] Webデザインで副業する方法とはappendメソッドと類似するメソッド appendメソッドと類似したメソッドには、次の5つがあります。 appendTo() prepend() prependTo() after() before() appendTo() append()とappendTo()の違いは、文法上の違いが一番大きいです。次のようにappend()の文法とは逆の位置に、セレクタと追加するものの指定を行います。 appendTo()の書き方 $("追加するもの").appendTo("セレクタ"); 指定する値が逆ということは、処理後の返り値もappend()とappendTo()では異なります。 console.log(append);では、#appendが表示されます。 console.log(appendTo);では、spanが表示されます。返り値は、メソッドの前に指定した値に影響するという文法を理解したうえで、使用するとよいです。なお、appendのほうがappendToより、処理が若干速いです。 let append=$("#append").append('Techacademy'); let appendTo=$('Techacademy').appendTo("#append"); console.log(append); console.log(appendTo); prepend() append()が指定した要素の最後に要素が追加されるのに対し、prepend()は要素の先頭に追加されるという違いがあります。 prepend()の書き方 $("セレクタ").prepend("追加するもの"); prependTo() prependTo()は、prepend()同様、要素の先頭に追加されます。 append()とappendTo()の違いと同様、prependTo()とprepend()には文法で指定する順番が逆という違いが存在します。 prependTo()の書き方 $("追加するもの").prependTo("セレクタ"); after() after()は、append()と文法は同じです。 append()では、セレクタの内側に追加されました。 after()ではセレクタの外側、かつ該当セレクタの後ろの要素として追加されます。 after()の書き方 $("セレクタ").after("追加するもの"); before() before()は、append()と文法は同じです。 append()では、セレクタの内側に追加されました。 before()では、セレクタの外側、かつ該当セレクタの前の要素として追加されます。 before()の書き方 $("セレクタ").before("追加するもの"); appendメソッドの応用 appendメソッドを利用した移動 appendを利用すると、次の文法で要素の移動が可能です。 $("移動先の要素").prepend("移動する要素") 要素か要素の中身の削除 appendメソッドを利用して要素を追加した後、remove()やempty()で削除が可能です。 removeメソッドでは要素そのものを削除できます。 emptyメソッドでは要素に記載された文字などを削除できます。 $(セレクタ).remove( ); $(セレクタ).empty( ); 実際に書いてみようそれでは簡単にappendの処理を書いていきましょう。今回はボタンをクリックすると、ulタグ内にli要素が追加されていくプログラムを書いていきます。サンプルコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function() { $("button").click(function() { $("ul").append("<li>追加</li>");

JavaScript

擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説

CSSでnth-of-typeを使って、特殊な「擬似クラス」を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次隣接セレクタとは直下セレクタとは間接セレクタとはそれぞれのセレクタの活用場面執筆してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。【動画の解説はこちら】田島悠介今回はnth-of-typeという擬似クラスを使ってみよう。擬似クラスは、セレクタのうしろに追記することで要素の中でさらに条件をつけることができるものだよ。大石ゆかり田島メンター！nth-of-typeはどういった条件を指定できるんですか〜？田島悠介指定した要素が親要素から見て、同じ種類の要素のみを数えたとき何番目になるかというのを見るんだ。まずは基本の書き方を見てみよう。大石ゆかり分かりました！ nth-of-typeとは nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似クラスです。擬似クラスとは、指定した要素の一部にCSSを反映できる方法を指します。以下、コード例です。 //兄弟関係にあるのうちx番目のを選択 span:nth-of-type(x){ 〜 } 要素の数だけを数えて、x番目の要素のみを選択します。疑似クラスについて詳しく学びたい方は、HTML5で定義された擬似クラスをご覧ください。 nth-of-typeの書き方「nth-of-type(2n)」の前に「：」（ｺﾛﾝ）がついていることに注目してください。 li:nth-of-type(2n){ /*適用する内容*/ } ( )内部の「n」を使って、何番目であるかを記しています。今回は「2n」番目であることから、2の倍数である偶数番目に適用されます。また、「3n-1」や「odd」「even」という指定もできます。「odd」「even」はそれぞれ奇数、偶数という指定方法です。田島悠介 ()内で指定された部分にのみ、スタイルが適用されるんだ。大石ゆかりこの場合は偶数が対象ということですね。田島悠介次は実際の例で見てみよう。今回はリスト項目の指定の部分のみ、色を変えるというのをやってみるよ。 [PR] Webデザインで副業する方法とは実際に書いてみよう実際にHTMLとCSSを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS nth-of-type</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li>

CSS

jQueryで要素を選択するセレクタの使い方【初心者向け】

JavaScriptのライブラリであるjQueryでセレクタの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。ある要素だけ動きを出したいなど特定の要素に処理を行う際に便利なので、ぜひ理解していきましょう。目次隣接セレクタとは直下セレクタとは間接セレクタとはそれぞれのセレクタの活用場面執筆してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。セレクタとはセレクタとは、jQueryで要素を選択するための文字列のことです。例えば、以下のようなHTMLがあったとします。 (この例ではdivやpやh1が「要素」です) <div id="div1"> p1 p2 p3 </div> <div id="div2"> <h1 class="h1">h1</h1> <h1 class="h2">h2</h1> <h1 class="h3">h3</h1> </div> このHTMLに対して、「p1クラスが設定されている要素を選択」する場合、$(“.p1”)というセレクタを使います。 (厳密には$(“.p1″)のうち”.p1″部分だけがセレクタです) ほかにも様々な選択の仕方がありますので、順に見ていきましょう。大石ゆかり HTMLタグやクラス指定がありますね。田島悠介 jQueryの$()の中にHTMLタグやclass属性の名前を書くと、その要素を取得できるんだよ。大石ゆかり HTMLタグであっても、class属性であっても同じように書いて取得できるんですね！田島悠介そうそう。HTMLタグとid属性とclass属性を中心に、主な指定方法について見てみよう！セレクタを指定する書き方セレクタを指定する書き方にはいくつかの種類がありますが、本稿では以下のセレクタについて解説します。要素セレクタ：HTMLタグで指定クラスセレクタ：class属性で指定 IDセレクタ：id属性で指定グループセレクタ：複数のセレクタを組み合わせて指定子孫セレクタ：階層的に要素を指定属性セレクタ（属性フィルタ）：要素の属性をもとに指定セレクタの書き方を、以下のHTMLの要素を例に説明します。「ここにセレクタを使ったコードを書きます」の部分を書き換えながら確認していきましょう。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="div1"> p1 p2 p3

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

隣接セレクタとは

直下セレクタとは

間接セレクタとは

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

執筆してくれたメンター

関連するキーワード

あわせてよく読まれている記事

CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】

3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】

PythonのSyntaxErrorの解決方法を現役エンジニアが解説【初心者向け】

jQueryでappendメソッドを使って要素を追加する方法【初心者向け】

擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説

jQueryで要素を選択するセレクタの使い方【初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

隣接セレクタとは

直下セレクタとは

間接セレクタとは

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

執筆してくれたメンター

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ