jQuery のセレクタ一覧 Tips

jQuery, Web

jQueryロゴ

jQuery には DOM 要素 (DOMツリーのノード) を選択するための便利なセレクタがたくさん用意されています。
CSS と同様のセレクタや、jQuery 独自のセレクタがあります。
セレクタは単一で指定することも、複数で指定することもできます。

目次

要素セレクタ

指定した要素 (タグ) 名の要素を選択する

要素名

<div> や <p> などの要素を、要素名 (タグ名) を指定して選択します。

idセレクタ

指定したIDを持つの要素を選択する

#id名

要素に設定されているID名 (<div id=”これ” >) を指定して要素を選択します。

クラスセレクタ

指定したクラスを持つ要素を選択する

.クラス名

要素に設定されているクラス名 (<div class=”これ” >) を指定して要素を選択します。

全 (要素) セレクタ

全ての要素を選択する

*

全ての要素を選択します。

複数セレクタ

複数の指定したセレクタのいずれかに合致する要素を選択する (OR)

セレクタ1, セレクタ2, … セレクタn

2 つ以上のセレクタをカンマ (,) で区切って記述することで、指定したセレクタのいずれかに合致する要素を選択することができます。
例えば、ul 要素または ol 要素を選択したい場合は “ul, ol” と記述します。

複数の指定したセレクタの全てに合致する要素を選択する (AND)

セレクタ1セレクタ2…セレクタn

2 つ以上のセレクタをつなげて記述することで、指定したセレクタのいずれにも合致する要素を選択することができます。
例えば、div 要素の中で「abc」というクラスを持つ要素を選択する場合は “div.abc” と記述します。

親子階層セレクタ

子要素を選択する

親 > 子

子孫要素を選択する

先祖 子孫

兄弟階層 (同一階層) セレクタ

指定した要素の次の要素を選択する

前 + 次

指定した要素以降の兄弟要素 (同一階層の要素) を選択する

前 ~ 兄弟

要素のインデックスによるセレクタ

指定したインデックスの要素を選択する

:eq(インデックス)

指定したインデックスより前のインデックスを持つ要素を選択する

:lt(インデックス)

指定したインデックスより後のインデックスを持つ要素を選択する

:gt(インデックス)

指定したセレクタでない要素を選択する

:not(セレクタ)

インデックスが最初の要素を選択する

:first

インデックスが最後の要素を選択する

:last

インデックスが偶数 (0, 2, 4…) の要素を選択する

:even

インデックスが奇数 (1, 3, 5…) の要素を選択する

:odd

子要素 (子ノード) セレクタ

インデックスが最初の子要素を選択する

:first-child

特定のタイプの中でインデックスが最初の子要素を選択する

:first-of-type

インデックスが最後の子要素を選択する

:last-child

特定のタイプの中でインデックスが最後の子要素を選択する

:last-of-type

親要素に対して 1 つしかない子要素を選択する

:only-child

特定のタイプの中で親要素に対して 1 つしかない子要素を選択する

:only-of-type

指定したインデックスの子要素を選択する

:nth-child(インデックス)

特定のタイプの中で指定したインデックスの子要素を選択する

:nth-of-type(インデックス)

インデックスが奇数 (1, 3, 5…) の子要素を選択する

:nth-child(odd)

特定のタイプの中でインデックスが奇数 (1, 3, 5…) の子要素を選択する

:nth-of-type(odd)

インデックスが偶数 (2, 4, 6…) の子要素を選択する

:nth-child(even)

特定のタイプの中でインデックスが偶数 (2, 4, 6…) の子要素を選択する

:nth-of-type(even)

n 個おきの子要素を選択する

:nth-child(an + b)

特定のタイプの中で n 個おきの子要素を選択する

:nth-of-type(an + b)

後ろから指定したインデックスの子要素を選択する

:nth-last-child(インデックス)

特定のタイプの中で後ろから指定したインデックスの子要素を選択する

:nth-last-of-type(インデックス)

コンテント (内容) セレクタ

テキスト (文字列) が含まれる要素を選択する

:contains(テキスト)

子要素、テキストなど何も含まない要素を選択する

:empty

指定したセレクタを持つ要素を選択する

:has(セレクタ)

子要素、テキストなどを含む要素を選択する

:parent

属性セレクタ

指定した属性を持つ要素を選択する

[属性名]

指定した属性が特定の値を持つ要素を選択する

[属性名=値]

指定した属性が特定の値を持たない要素を選択する

[属性名!=値]

指定した属性が特定の値 (文字列) から始まる要素を選択する

[属性名^=値]

指定した属性が特定の値 (文字列) で終わる要素を選択する

[属性名*=値]

指定した属性が特定の値 (文字列) を含む要素を選択する

[属性名$=値]

指定した複数の属性名=値のすべてに合致する要素を選択する

[属性名1=値1][属性名2=値2]…[属性名n=値n]

表示 / 非表示 状態セレクタ

表示されている要素を選択する

:visible

表示されていない要素 (非表示の要素) を選択する

:hidden

有効 / 無効 (活性 / 非活性) 状態セレクタ

有効 (使用可能・活性) になっている要素を選択する

:enabled

無効 (使用不可・非活性) になっている要素を選択する

:disabled

アニメーション状態セレクタ

アニメーション中の要素を選択する

:animated

フォーム要素セレクタ

input, textarea, select, button 要素を選択する

:input

text 要素を選択する

:text

password 要素を選択する

:password

radio 要素を選択する

:radio

checkbox 要素を選択する

:checkbox

submit 要素を選択する

:submit

image 要素を選択する

:image

reset 要素を選択する

:reset

button 要素を選択する

:button

file 要素を選択する

:file

hidden 要素を選択する

:hidden

フォーム要素状態セレクタ

チェックされている要素を選択する

:checked

選択肢が選ばれている要素を選択する

:selected

ヘッダー要素セレクタ

ヘッダー要素を選択する

:header

ルートセレクタ

ルートを選択する

:root

ページ内リンク先セレクタ

ターゲットを選択する

:target

言語セレクタ

指定した言語、国を選択する

:lang()