jQueryでDOM要素を選択するときに使うことのできるセレクタのまとめです。

jQueryのセレクタまとめ

jQueryの$()関数の第一引数にセレクタが入っている場合、第二引数はその処理の処理のコンテクストを示します。第二引数が割り当てられていない場合は、デフォルトのコンテクストとして、そのセレクタをDOMツリーのあらゆる要素に適用するというコンテクストになります。

コンテクストにはDOM要素の参照を使えますが、jQueryセレクタを含む文字列も、ラップされたDOM要素の集合も記述することができます。$()の中に$()を入れてokです。

$(selector)
$(selector, context)

基本のCSSセレクタ

IDやクラス名、タグ名、それらの階層構造などCSSを扱うときによく使うセレクタをjQueryで使います。

*

あらゆる要素

E

タグ名がEのすべての要素すべて

E F

タグ名がEの子孫で、タグ名がFの要素すべて

E > F

タグ名がEの直接の子で、タグ名がFの要素すべて

E + F

タグ名がEの直後で、タグ名がFの要素すべて

E ~ F

タグ名がEより後ろにある、タグ名がFの要素すべて

E.C

Cというクラス名の、Eというタグ名の要素すべて

E#I

CというID名の、Eというタグ名の要素すべて

E[A]

Aという属性を持つ、Eというタグ名の要素すべて

E[A=V]

Aという属性でVという値を持つ、Eというタグ名の要素すべて

E[A^=V]

Aという属性でVから始まる値を持つ、Eというタグ名の要素すべて

E[A^=V]

Aという属性でVから始まる値を持つ、Eというタグ名の要素すべて

E[A$=V]

Aという属性でVで終わる値を持つ、Eというタグ名の要素すべて

E[A*=V]

Aという属性でVを含む値を持つ、またはAという属性を持たない、Eというタグ名の要素すべて

E[A!=V]

Aという属性でVではない値を持つ、またはAという属性を持たない、Eというタグ名の要素すべて

位置を指定するセレクタ

ページ上の位置や他の要素との相対的な関係によって要素を選択する時に使うセレクタです。ここではCSSで擬似クラスと呼ばれているものを扱っていますが、jQueryではフィルタセレクタと呼ばれ、:をつけて記述します。
フィルタセレクタのみで、セレクタを省略したときは、デフォルトで*がセレクタに指定されています。

p a:first

p要素の子孫要素の最初のa要素すべて

p a:last

p要素の子孫要素の最後のa要素すべて

p a:first-child

p要素の最初の子孫要素のa要素すべて

p a:last-child

p要素の最後の子孫要素のa要素すべて

p:only-child

兄弟を持たないp要素すべて

p a:nth-child(n)

p要素の子孫要素のn番目のa要素すべて

p a:nth-child(even / odd)

p要素の子孫要素の偶数 / 奇数番目のa要素すべて

p:even

偶数番目のp要素すべて

p:odd

奇数番目のp要素すべて

p:eq(n)

n番目のp要素すべて

p:gt(n)

n番目のp要素を除いた、それ以降のp要素

p:gt(n)

n番目のp要素を除いた、それ以前のp要素

順序に関する注意

nth-childフィルタはCSSとの互換をとるため1から数えますが、他のセレクタは一般的なプログラミング通り0から数えます。

カスタムフィルタセレクタ

その他の強力なセレクタで、状態などに応じて要素を選択します。

E:animated

現在アニメーションが実行中の、タグ名がEの要素すべて

I:checked

チェックされた状態の、チェックボックスかラジオボタンすべて

E:disabled

無効になっている、タグ名がEのフォームの要素すべて

E:enabled

有効になっている、タグ名がEのフォームの要素すべて

E:empty

子要素またはテキストを持っていない、タグ名がEの要素すべて

E:parent

子要素またはテキストを持っている、タグ名がEの要素すべて

E:hidden

不可視状態の、タグ名がEの要素すべて

E:visible

可視状態の、タグ名がEの要素すべて

E:has(F)

Fというタグ名の要素をひとつ以上含んでいる、タグ名がEの要素すべて

E:contains(test)

testというテキストをふくむ、タグ名がEの要素すべて

E:not(selector)

selectorで指定されたセレクタの逆の条件の、タグ名がEの要素すべて

使い方に関して、ややこしいものについて掘り下げてみます。

:notフィルタ

セレクタを論理逆転させたい場合には、:notフィルタを使います。

// チェックされていないチェックボックスまたはラジオボタン
$('input:not(:checked)')

// 拡張子がpng以外のimg要素
$('img:not([src*=".png"])')

:hasフィルタ

特定の要素を持っている要素を選択したい時:hasフィルタを使います。

// 拡張子がpngのimg要素を含んでいるp要素
$('p:has(img[src*=".png"]))')

おわります。