【完全版】jQueryセレクタまとめ - 全種類を実例付きで解説

セレクタとは

jQueryのセレクタは、HTML要素を選択するための記法です。CSSセレクタとほぼ同じ書き方で、直感的に要素を指定できます。

// 基本構文
$('セレクタ')

// 例
$('#header')      // IDで選択
$('.menu')        // クラスで選択
$('p')            // 要素で選択

基本セレクタ

全称セレクタ

$('*')  // すべての要素を選択

使用例:

// ページ内のすべての要素のマージンをリセット
$('*').css('margin', '0');

注意: パフォーマンスに影響するため、本番環境での使用は避ける

要素セレクタ

$('p')      // すべての<p>要素
$('div')    // すべての<div>要素
$('a')      // すべての<a>要素
$('li')     // すべての<li>要素

使用例:

// すべての段落のフォントサイズを変更
$('p').css('font-size', '16px');

// すべてのリンクを新しいタブで開く
$('a').attr('target', '_blank');

IDセレクタ

$('#header')     // id="header"の要素
$('#main')       // id="main"の要素
$('#footer')     // id="footer"の要素

使用例:

// ヘッダーの背景色を変更
$('#header').css('background', '#333');

// メインコンテンツを取得
let content = $('#main').html();

クラスセレクタ

$('.active')     // class="active"のすべての要素
$('.btn')        // class="btn"のすべての要素
$('.hidden')     // class="hidden"のすべての要素

使用例:

// activeクラスを持つ要素を表示
$('.active').show();

// ボタンにイベントを設定
$('.btn').on('click', function() {
    console.log('クリックされました');
});

グループセレクタ

$('h1, h2, h3')              // h1, h2, h3をすべて選択
$('#header, #footer')        // 複数のIDを選択
$('.btn, .link')             // 複数のクラスを選択

使用例:

// 見出しすべての色を変更
$('h1, h2, h3, h4').css('color', '#333');

階層セレクタ

子孫セレクタ（スペース）

$('div p')       // div内のすべてのp（孫以下も含む）
$('#menu li')    // #menu内のすべてのli
$('.container a') // .container内のすべてのa

使用例:

// ナビゲーション内のリンクスタイル変更
$('#nav a').css('text-decoration', 'none');

子セレクタ（>）

$('ul > li')     // ulの直接の子であるli
$('div > p')     // divの直接の子であるp
$('#menu > li')  // #menuの直接の子であるli

使用例:

// 直接の子要素のみにスタイル適用
$('#list > li').addClass('top-level');

隣接セレクタ（+）

$('h2 + p')      // h2の直後のp
$('.title + .content')  // .titleの直後の.content

使用例:

// 見出しの直後の段落を強調
$('h2 + p').css('font-weight', 'bold');

兄弟セレクタ（~）

$('h2 ~ p')      // h2以降の兄弟のp（すべて）
$('.first ~ .item')  // .first以降の.item

使用例:

// 選択した要素以降の兄弟を非表示
$('.selected ~ li').hide();

属性セレクタ

属性を持つ要素

$('[href]')          // href属性を持つ要素
$('[disabled]')      // disabled属性を持つ要素
$('[data-id]')       // data-id属性を持つ要素

完全一致

$('[type="text"]')           // type="text"の要素
$('[name="email"]')          // name="email"の要素
$('[data-status="active"]')  // data-status="active"の要素

使用例:

// テキスト入力にフォーカススタイル
$('input[type="text"]').on('focus', function() {
    $(this).addClass('focused');
});

前方一致（^=）

$('[href^="https"]')     // httpsで始まるhref
$('[class^="btn-"]')     // btn-で始まるclass
$('[id^="section"]')     // sectionで始まるid

使用例:

// 外部リンクにアイコンを追加
$('a[href^="https"]').addClass('external-link');

後方一致（$=）

$('[href$=".pdf"]')      // .pdfで終わるhref
$('[src$=".jpg"]')       // .jpgで終わるsrc
$('[href$=".zip"]')      // .zipで終わるhref

使用例:

// PDFリンクにアイコン追加
$('a[href$=".pdf"]').prepend('📄 ');

部分一致（*=）

$('[href*="example"]')   // exampleを含むhref
$('[class*="btn"]')      // btnを含むclass
$('[id*="menu"]')        // menuを含むid

単語一致（~=）

$('[class~="active"]')   // classに"active"という単語を含む

ハイフン区切り一致（|=）

$('[lang|="en"]')        // lang="en"またはlang="en-*"

属性の否定

$('input:not([readonly])')   // readonlyでないinput
$('a:not([target="_blank"])') // 新しいタブで開かないリンク

フィルタセレクタ

位置フィルタ

$('li:first')        // 最初のli
$('li:last')         // 最後のli
$('li:eq(2)')        // 3番目のli（0始まり）
$('li:lt(3)')        // 3番目より前のli
$('li:gt(2)')        // 3番目より後のli
$('li:even')         // 偶数番目のli（0, 2, 4...）
$('li:odd')          // 奇数番目のli（1, 3, 5...）

使用例:

// テーブルの偶数行に背景色
$('tr:even').css('background', '#f9f9f9');

// 最初の項目を強調
$('li:first').addClass('first-item');

// 3件目までを表示、それ以降を非表示
$('li:gt(2)').hide();

内容フィルタ

$('div:empty')           // 子要素を持たないdiv
$('div:parent')          // 子要素を持つdiv
$('p:contains("検索")')  // "検索"を含むp
$('div:has(p)')          // pを含むdiv

使用例:

// 特定のテキストを含む要素をハイライト
$('p:contains("重要")').addClass('highlight');

// 空の要素を削除
$('div:empty').remove();

表示状態フィルタ

$(':visible')        // 表示されている要素
$(':hidden')         // 非表示の要素

使用例:

// 表示されている要素の数を取得
let visibleCount = $('li:visible').length;

// 非表示の要素をすべて表示
$('.item:hidden').show();

子要素フィルタ

$('li:first-child')      // 最初の子要素であるli
$('li:last-child')       // 最後の子要素であるli
$('li:nth-child(2)')     // 2番目の子要素（1始まり）
$('li:nth-child(odd)')   // 奇数番目の子要素
$('li:nth-child(even)')  // 偶数番目の子要素
$('li:nth-child(3n)')    // 3の倍数番目
$('li:only-child')       // 唯一の子要素であるli

使用例:

// 各リストの最初の項目にスタイル
$('ul li:first-child').css('font-weight', 'bold');

// 3番目ごとに背景色
$('li:nth-child(3n)').css('background', '#eee');

フォームセレクタ

入力タイプ

$(':input')          // すべてのフォーム要素
$(':text')           // type="text"
$(':password')       // type="password"
$(':radio')          // type="radio"
$(':checkbox')       // type="checkbox"
$(':submit')         // type="submit"
$(':reset')          // type="reset"
$(':button')         // type="button"
$(':file')           // type="file"
$(':hidden')         // type="hidden"

使用例:

// すべてのテキスト入力をクリア
$(':text').val('');

// チェックボックスの数を取得
let checkboxCount = $(':checkbox').length;

フォーム状態

$(':enabled')        // 有効な要素
$(':disabled')       // 無効な要素
$(':checked')        // チェックされた要素
$(':selected')       // 選択されたoption
$(':focus')          // フォーカスされた要素

使用例:

// チェックされたチェックボックスの値を取得
$(':checkbox:checked').each(function() {
    console.log($(this).val());
});

// 選択されたオプションのテキストを取得
let selectedText = $('select option:selected').text();

// 無効化された要素を有効化
$(':disabled').prop('disabled', false);

複合セレクタ

複数条件の組み合わせ

// クラスと要素
$('input.form-control')      // class="form-control"のinput

// クラスとID
$('#form .error')            // #form内の.error

// 複数のクラス
$('.btn.primary')            // class="btn primary"の要素

// 属性とクラス
$('input[type="text"].large') // type="text"かつclass="large"のinput

否定（:not）

$('li:not(.active)')         // activeでないli
$('input:not(:disabled)')    // 無効でないinput
$('a:not([href^="#"])')      // #で始まらないリンク
$('p:not(:first)')           // 最初以外のp

使用例:

// activeでないメニュー項目を半透明に
$('#menu li:not(.active)').css('opacity', '0.6');

// 必須でない入力欄のスタイル
$('input:not([required])').addClass('optional');

複数のフィルタ

$('li:visible:first')        // 表示されている最初のli
$('input:text:enabled')      // 有効なテキスト入力
$('tr:even:visible')         // 表示されている偶数行

パフォーマンスTips

1. IDセレクタを優先する

// ✅ 速い - IDセレクタ
$('#header')

// ❌ 遅い - クラスより要素が多い
$('div.header')

2. コンテキストを指定する

// ✅ 速い - 検索範囲を限定
$('.item', '#container')
// または
$('#container').find('.item')

// ❌ 遅い - ページ全体を検索
$('.item')

3. セレクタをキャッシュする

// ✅ 良い - 変数にキャッシュ
let $menu = $('#menu');
$menu.addClass('active');
$menu.find('li').show();

// ❌ 悪い - 毎回検索
$('#menu').addClass('active');
$('#menu').find('li').show();

4. 右から左への評価を意識

jQueryは右から左へセレクタを評価します。

// ✅ 速い - 右側を具体的に
$('#list > li.active')

// ❌ 遅い - 右側が広範囲
$('div.container li')

5. 全称セレクタを避ける

// ❌ 遅い
$('.container *')
$('*:hidden')

// ✅ 速い - 要素を指定
$('.container div, .container p')

まとめ

よく使うセレクタ早見表

用途	セレクタ	例
ID選択	`#id`	`$('#header')`
クラス選択	`.class`	`$('.btn')`
要素選択	`element`	`$('div')`
子孫選択	`親子孫`	`$('#nav a')`
直接の子	`親 > 子`	`$('ul > li')`
属性一致	`[attr="val"]`	`$('[type="text"]')`
最初	`:first`	`$('li:first')`
最後	`:last`	`$('li:last')`
n番目	`:eq(n)`	`$('li:eq(2)')`
否定	`:not()`	`$('li:not(.active)')`
表示中	`:visible`	`$(':visible')`
チェック済	`:checked`	`$(':checked')`

セレクタを使いこなすことで、jQueryでの開発効率が大幅に向上します。パフォーマンスを意識しながら、適切なセレクタを選択しましょう。

目次

セレクタとは

基本セレクタ

全称セレクタ

要素セレクタ

IDセレクタ

クラスセレクタ

グループセレクタ

階層セレクタ

子孫セレクタ（スペース）

子セレクタ（>）

隣接セレクタ（+）

兄弟セレクタ（~）

属性セレクタ

属性を持つ要素

完全一致

前方一致（^=）

後方一致（$=）

部分一致（*=）

単語一致（~=）

ハイフン区切り一致（|=）

属性の否定

フィルタセレクタ

位置フィルタ

内容フィルタ

表示状態フィルタ

子要素フィルタ

フォームセレクタ

入力タイプ

フォーム状態

複合セレクタ

複数条件の組み合わせ

否定（:not）

複数のフィルタ

パフォーマンスTips

1. IDセレクタを優先する

2. コンテキストを指定する

3. セレクタをキャッシュする

4. 右から左への評価を意識

5. 全称セレクタを避ける

まとめ

よく使うセレクタ早見表