jQueryセレクタの使い方を初心者にもわかりやすく徹底解説！

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…

悩む人

jQueryのセレクタって、たくさん種類があって何をどう使えばいいのか分からない…

そんな風に感じたことはありませんか？

この記事は、jQuery初心者の方に向けて、「セレクタの種類と使い方」を体系的に分かりやすくまとめた内容です。

この記事を読むことで、セレクタの役割や使いどころが明確になり、実際のコーディング作業がスムーズになります。

jQueryのセレクタとは?

jQueryで処理を行う際のポイントを簡単にいうと

という指定が必要です。

以下、簡単な例です。

今回は「どの要素に」に当たるjQueryのセレクタについて初心者の方にもわかりやすく解説します。

基本のセレクタ

ここからは、Webページの要素を的確に選択するための基本セレクタについて、具体的な例とともに理解を深めていきましょう。

要素セレクタ

要素セレクタは、HTMLのタグ名を指定することで、該当するすべての要素を選択できます。

$('div')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>
<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>

$(function(){
  $('h2').css({'color':'#0272fc'});
  $('p').css({'color':'#60b6ff'});
});

IDセレクタ

#を使って記述します。IDセレクタは非常に高速に動作しますが、同じIDを複数の要素に使用しないよう注意が必要です。

$('#header')

<div id="box1">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>
<div id="box2">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>

$(function(){
  $('#box1').css({'background':'#fff'});
});

classセレクタ

複数の要素に共通のスタイルや機能を適用したいときに使うのがclassセレクタです。.（ドット）を使って指定します。

$('.btn')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>
<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>

$(function(){
  $('.box').css({'border':'1px solid #ccc'});
});

グループセレクタ

複数の異なるセレクタをカンマ（,）で区切ることで、まとめて選択する方法です。効率よく複数の要素を対象にしたいときに活用できます。

$('h1, h2, h3')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>
<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>

$(function(){
  $('h2, p').css({'color':'#0272fc'});
});

ユニバーサルセレクタ

すべてのHTML要素を選択するセレクタです。基本的には * を使って記述します。

$('*')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>
<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>

$(function(){
  $('*').css({'color':'#0272fc'});
});

階層関係のセレクタ

HTMLは親子構造で成り立っており、ある要素が他の要素の中に含まれる形で記述されています。

こうした階層構造を意識して要素を選択したい場面は、実際の開発で非常によくあります。

jQueryの階層セレクタを使えば、親・子・兄弟といった関係性に基づいた柔軟な選択が可能になります。

ここでは、それぞれの階層セレクタの特徴や使い方を、具体的なコード例とともに解説していきます。

子セレクタ

子セレクタは、特定の親要素に直下で含まれている子要素を選択します。記述には >（大なり記号）を使用します。

$('ul > li')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>
<div class="box">
  <div>
    <h2>タイトル</h2>
    <p>テキスト</p>
  </div>
</div>

$(function(){
  $('.box > h2').css({'color':'#0272fc'});
});

子孫セレクタ

子孫セレクタは、指定した要素の中に含まれているすべての子孫要素（直下だけでなく深い階層も含む）を選択します。間にどれだけ他の要素が挟まっていても有効です。

$('div p')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>
<div class="box">
  <div>
    <h2>タイトル</h2>
    <p>テキスト</p>
  </div>
</div>

$(function(){
  $('.box p').css({'color':'#0272fc'});
});

隣接セレクタ

ある要素の直後にある兄弟要素を選択したいときに使うのが隣接セレクタです。+ を使って記述します。

$('h2 + p')

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

$(function(){
  $('li + li').css({//2個目以降のliにスタイルを適用
    'color':'#0272fc',
    'margin-top':'20px',
  });
});

間接セレクタ

間接セレクタは、ある要素の後に位置するすべての兄弟要素の中から、指定した要素を選択します。記述には ~ を使用します。

$('h2 ~ p')

<div class="box">
  <h2>タイトル</h2>
  <p class="text">テキスト</p>
  <p>テキスト</p>
  <p class="text">テキスト</p>
  <p>テキスト</p>
</div>

$(function(){
  $('h2 ~ .text').css({//h2の後に出てくる「.text」だけにスタイルを適用
    'color':'#0272fc',
  });
});

擬似クラスセレクタ

HTMLの構造だけでは捉えきれない「状態」や「条件」に基づいて要素を選択したいとき、jQueryでは「擬似クラスセレクタ」が活躍します。

特定の順番や属性の有無、兄弟要素との関係性など、柔軟な指定が可能で、より高度なDOM操作を実現できます。

ここでは、代表的な擬似クラスセレクタを一つずつ見ていきましょう。

first-child

親要素の中で最初に現れる子要素を選択します。必ず1番目の要素が対象になります。

この例では、すべてのli要素のうち、最初のli要素だけが選択されます。

$('li:first-child')

first-of-type

親要素から見て、最初に現れる要素を選択します。

:first-childとの違いは、親要素の中で1番目の子要素でなくて良い点です。

親要素の中で2番目の子要素だったとしても、そのタグは初めて現れたのであれば対象になります。

$('p:first-of-type')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
</div>

$(function(){
  $('p:first-of-type').css({'color':'blue',});
  //pタグは親要素からみて2番目（h2タグの後）だが、pタグとして最初に出てくる要素にスタイルが適用される
  $('p:first-child').css({'color':'red',});
  //「first-child」の場合は必ず1番目に出てこないと対象にならないため、この例の場合は何も適用されない
});

かすが

ちょっとややこしいですが、上のコード例を見れば違いがわかりますよ！

last-child

親要素の中で一番最後にある子要素を選択します。

この例では、すべてのli要素のうち、最後のli要素だけが選択されます。

$('li:last-child')

last-of-type

親要素から見て、最後に現れる要素を選択します。

:last-childとの違いは、親要素の中で最後の子要素でなくて良い点です。そのタグとして最後であれば対象になります。

$('p:last-of-type')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>このテキストが対象</p>
  <h2>タイトル</h2>
</div>

$(function(){
  $('p:last-of-type').css({'color':'blue',});
  //pタグは親要素からみて最後の子要素ではないが、pタグとして最後の要素にスタイルが適用される
  $('p:last-child').css({'color':'red',});
  //「last-child」の場合は必ず最後に出てこないと対象にならないため、この例の場合は何も適用されない
});

nth-child(n)

親要素から見て、n番目の子要素を選択します。nには数字やキーワード（odd, even）などを指定できます。

違う種類のタグもカウントに含まれます。

$('li:nth-child(3)')   // 3番目の子要素
$('li:nth-child(odd)') // 奇数番目の要素

nth-of-type(n)

同じタグのうち、n番目の要素を選択します。

:nth-childとの違いは、違う種類のタグはカウントに含まれない点です。

$('p:nth-of-type(2)')

<div class="box">
  <h2>タイトル</h2>
  <p>nth-childはここが対象</p>
  <p>nth-of-typeはここが対象</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <h2>タイトル</h2>
</div>

$(function(){
  $('p:nth-of-type(2)').css({'color':'#0272fc',});
  //pタグの中で2番目の要素にスタイルが適用される
  $('p:nth-child(2)').css({'color':'#60b6ff',});
  //「nth-child」の場合は、他の種類のタグも含めて2番目の要素にスタイルが適用される
});

nth-last-child(n)

最後から数えてn番目の子要素を選択します。違う種類のタグもカウントに含まれます。

$('li:nth-last-child(2)')

nth-last-of-type(n)

同じタグの中で、最後からn番目の要素を選択します。

$('p:nth-last-of-type(2)')

:nth-last-childとの違いは、違う種類のタグはカウントに含まれない点です。

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>nth-last-of-typeはここが対象</p>
  <p>nth-childはここが対象</p>
  <h2>タイトル</h2>
</div>

$(function(){
  $('p:nth-last-of-type(2)').css({'color':'#0272fc',});
  //pタグの中で最後から2番目の要素にスタイルが適用される
  $('p:nth-last-child(2)').css({'color':'#60b6ff',});
  //「nth-child」の場合は、他の種類のタグも含めて最後から2番目の要素にスタイルが適用される
});

only-child

親要素の中で唯一の子要素を選択します。違う種類のタグが存在する場合は適用されません。

$('div:only-child')

only-of-type

同じタグの中で、唯一存在する要素を選択します。

:only-childとの違いは、違う種類のタグが存在しても適用される点です。

$('p:only-of-type')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
</div>

$(function(){
  $('p:only-of-type').css({'color':'blue',});
  //h2タグもあるが、pタグは1つだけなのでスタイルが適用される
  $('p:only-child').css({'color':'red',});
  //「nth-child」の場合は、違うの種類のタグがあるとスタイルが適用されない
});

:not(selector)

指定したセレクタにマッチしない要素を選択します。

$('p:not(.highlight)')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
  <p>テキスト</p>
  <p class="hiright">テキスト</p>
  <p>テキスト</p>
</div>

$(function(){
  $('p:not(.hiright)').css({'color':'#0272fc',});
  //「.hiright」以外のpタグにスタイルを適用
});

:empty

中に何のコンテンツも含まない要素（テキストも子要素もなし）を選択します。

$('div:empty')

<div class="box">
  <h2>タイトル</h2>
  <p>テキスト</p>
  <p>テキスト</p>
  <p></p>
  <p>テキスト</p>
</div>

$(function(){
  $('p:empty').css({
    'background':'#0272fc',
    'height':'40px',
  });
});

属性セレクタ

HTML要素には、id や class の他にも様々な属性（href, src, type, data-* など）が付けられており、これらの属性を利用して要素を選択できるのが「属性セレクタ」です。

jQueryの属性セレクタを活用すれば、より柔軟で条件に合致した要素選択が可能になり、特定の属性値に基づいた処理が格段に効率的になります。

ここでは、よく使われる属性セレクタの使い方を種類ごとに解説していきます。

指定の属性値の要素を選択する

特定の属性とその値を持つ要素だけを選びたい場合に使用します。

この例では、type="text" が設定されているすべての <input> 要素を選択します。

$('input[type="text"]')

指定の属性値と等しくない要素を選択する

特定の属性値を「持たない」または「異なる」要素を選択したい場合には、!= を使います。

この例では、type 属性が checkbox ではないすべての <input> 要素が対象になります。

$('input[type!="checkbox"]')

指定の属性値で始まる要素を選択する

ある属性値が特定の文字列で始まっている要素を対象にする場合は、^= を使用します。

この例では、href 属性が "https" で始まるすべてのリンクを選択します。

$('a[href^="https"]')

指定の属性値で終わる要素を選択する

特定の文字列で終わっている属性値を持つ要素には、$= を使用します。

この例では、.jpg で終わる画像ファイルを選択します。

$('img[src$=".jpg"]')

指定の属性値と部分一致する要素を選択する

属性値の中に特定の文字列が「含まれている」要素を選択するには、*= を使います。

この例では、data-info 属性に "user" を含むすべての <div> 要素が対象となります。

$('div[data-info*="user"]')

WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ

「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。

しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。

一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。

かすが

私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！

スクールで学ぶ5つのメリット

• カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
• 現役のプロから実践的なフィードバックを受けられる
• わからないことをすぐに質問・解決できる環境がある
• 制作課題を通じて、ポートフォリオが作成できる
• 学習仲間や講師とのつながりが、モチベーション維持につながる

スクール選びでチェックすべき5つのポイント

• カリキュラムが現場で必要とされる技術に対応しているか
• 現役デザイナー・エンジニアが講師として在籍しているか
• ポートフォリオ制作のサポートが充実しているか
• 卒業後の就職・転職支援が用意されているか
• オンライン・通学など、自分の生活スタイルに合った受講形式か

遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。

WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！

あわせて読みたい

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…

jQueryのセレクタまとめ

ここまで、jQueryで使用できる様々なセレクタについて解説してきました。

セレクタの使い方を正しく理解し、状況に応じて適切に使い分けることで、より効率的なDOM操作が可能になります。

以下に、各カテゴリごとのセレクタの特徴をまとめますので、復習や実装時の参考にしてください。

以下の記事では、jQueryの初心者に本当におすすめできる書籍を厳選して紹介しています。

「何から始めたらいいかわからない」という方にも、自信をもっておすすめできる7冊をまとめました。

ぜひこちらもチェックしてみてください。

jQueryおすすめ本7選｜初心者〜中級者向け完全ガイド

あわせて読みたい

jQueryおすすめ本7選｜初心者〜中級者向け完全ガイド jQueryを勉強したいけど、どの本を選べばいいか分からない… 初心者向けって書いてあるけど、自分に合ってるか不安… そんな風に感じて、本選びで立ち止まっていませんか…