この記事の要点

要素セレクタ (タグ セレクタ) = HTML タグ名で要素を選択。$("p") のように指定 基本: $("div") / $("a") / $("input") / 複数 $("div, span") 結合: 子孫 (半角空白)、子 (>)、隣接兄弟 (+)、間接兄弟 (~) 属性付き: $("a[href]") / $("input[type=text]") / 部分一致 (*=, ^=, $=) 位置擬似: :first / :last / :eq(n) / :even / :odd。CSS3 標準と一部異なる

要素セレクタの基本

jQuery の要素セレクタ (タグ セレクタ) は、HTML のタグ名で要素を選択する最も基本的な記法です。CSS のセレクタ仕様にほぼ準拠しており、追加で jQuery 独自の擬似セレクタも使えます。

// 全ての <p> 要素
$('p')

// 全ての <div> 要素
$('div')

// 全てのリンク
$('a')

// すべての input
$('input')

// 複数指定 (カンマ区切り、OR 結合)
$('div, span, p')

// 否定
$('div:not(.special)')

結合子: 子孫 / 子 / 兄弟

結合子	意味	例
(半角スペース)	子孫 (任意の深さ)	$('div p') = div の中の全 p
>	直下の子	$('ul > li') = ul の直接の子 li
+	隣接する次の兄弟	$('h2 + p') = h2 の直後の p
~	後続の全兄弟	$('h2 ~ p') = h2 以降の同階層 p

<!-- HTML -->
<div id="content">
  <h2>見出し1</h2>
  <p>段落A</p>
  <p>段落B</p>
  <ul>
    <li>項目1
      <ul>
        <li>ネスト</li>
      </ul>
    </li>
  </ul>
</div>

$('#content p')         // 段落A, B (子孫)
$('#content > p')       // 段落A, B (直接の子)
$('h2 + p')             // 段落A (隣接)
$('h2 ~ p')             // 段落A, B (後続兄弟)
$('ul li')              // 項目1, ネスト (子孫)
$('ul > li')            // 項目1, ネスト (それぞれの ul の直接の子)

属性セレクタ

記法	意味
[attr]	属性が存在
[attr=value]	完全一致
[attr!=value]	不一致 (jQuery 拡張)
[attr^=value]	前方一致 (starts with)
[attr$=value]	後方一致 (ends with)
[attr*=value]	部分一致 (contains)
[attr~=value]	空白区切り単語のいずれかと一致
[attr|=value]	value または value- で始まる

// href 属性を持つ a
$('a[href]')

// type が text の input
$('input[type=text]')
$('input[type="text"]')   // 引用符でも可

// http で始まる URL
$('a[href^="http"]')

// .pdf で終わるリンク
$('a[href$=".pdf"]')

// example.com を含むリンク
$('a[href*="example.com"]')

// 必須項目 (required 属性付き)
$('input[required]')

// data-* 属性
$('div[data-role="dialog"]')

クラス / ID との組み合わせ

// p で class が note
$('p.note')

// div の中の class が active な li
$('div li.active')

// 複数クラス (両方持つ要素)
$('button.btn.primary')

// id "main" の中の要素セレクタ
$('#main p')

// 要素 + ID は通常不要 (ID は一意)
$('#header')         // 推奨
$('div#header')      // 動くが冗長

位置指定の擬似セレクタ

jQuery 独自のフィルタです。CSS3 の :nth-child 等とは挙動が異なるので注意。

セレクタ	意味
:first	マッチした集合の最初
:last	マッチした集合の最後
:eq(n)	0-indexed の n 番目
:gt(n)	n より後 (0-indexed)
:lt(n)	n より前 (0-indexed)
:even	偶数番目 (0,2,4...)
:odd	奇数番目 (1,3,5...)
:first-child	各親の最初の子 (CSS 標準)
:last-child	各親の最後の子 (CSS 標準)
:nth-child(n)	各親の n 番目 (1-indexed!)

$('li:first')       // 最初の li 1 個 (集合の中で)
$('li:first-child') // 各親で最初の子になっている li
$('tr:even')        // 偶数行 (0-indexed なので見た目の奇数行)
$('p:eq(2)')        // 3 番目 (0-indexed)
$('p:nth-child(2)') // 各親で 2 番目 (1-indexed)

コンテンツ / 状態の擬似セレクタ

// テキスト含有
$('p:contains("重要")')

// 空要素
$('div:empty')

// 子要素を持つ
$('div:parent')

// 表示中 / 非表示
$(':visible')
$(':hidden')

// フォーム入力系
$(':input')          // input/select/textarea/button 全部
$(':text')           // input[type=text]
$(':checkbox')
$(':radio')
$(':checked')        // チェック済
$(':selected')       // option の選択中
$(':disabled')
$(':enabled')
$(':focus')

セレクタとパフォーマンス

速度	セレクタ	備考
★★★ 最速	$('#id')	document.getElementById 直結
★★ 速い	$('tag')	getElementsByTagName
★★ 速い	$('.class')	getElementsByClassName
★ 中	$('div.cls')	querySelectorAll
遅い	$('div:first') 等の jQuery 擬似	jQuery 自前ループ
遅い	属性部分一致 [attr*=val]	全要素走査

CSS セレクタとの違い

• jQuery は CSS3 セレクタ + jQuery 独自拡張 (Sizzle)
• :first / :eq / :contains 等は jQuery 独自で querySelectorAll では使えない
• :first-child / :nth-child は CSS 標準なので両方で使える

querySelectorAll での書き換え (脱 jQuery)

// jQuery
$('div.note')
$('input[type=text]')
$('ul > li:first-child')

// querySelectorAll (Vanilla JS)
document.querySelectorAll('div.note')
document.querySelectorAll('input[type=text]')
document.querySelectorAll('ul > li:first-child')

// 要素 1 個取得
document.querySelector('#main')      // = $('#main')[0]

// jQuery 独自セレクタは querySelectorAll で動かない
$('p:contains("hi")')                // OK
document.querySelectorAll('p:contains("hi")')   // ❌ SyntaxError

// 代替
[...document.querySelectorAll('p')]
  .filter(p => p.textContent.includes('hi'))

FAQ

Q: $('p').first() と $('p:first') はどちらが良い？
A: .first() 推奨。:first セレクタは jQuery 独自で、内部処理が遅め。可読性とパフォーマンスの両面で .first() が良いです。

Q: :eq(0) と :first-child の違い
A: 全く違います。$('li:eq(0)') は集合全体の最初の 1 個、$('li:first-child') は各親で最初の子になっている li 全部 (複数の親があれば複数返る)。

Q: 2026 年も jQuery を使うべき？
A: 新規開発では基本不要 (Vanilla JS / Vue / React で十分)。既存プロジェクトのメンテでは引き続き使われています。jQuery 4.x は 2024 年公開、軽量化されました。