セレクタの使い方まとめ・一覧【jQuery/CSS】

jQuery と CSS のセレクターの違い

jQueryで使えるセレクターは基本的には「CSSで使えるもの + jQuery独自のもの」となりますが、比較的新しいCSSのセレクターの一部が使えない等の例外があるので注意が必要です。jQueryで使えないCSSセレクタは CSSのみ マークを付けています。

基本セレクタ

書式	概要
*	全称：すべての要素。
element	要素名：HTML要素名で指定する。
#id	id名：指定したid属性の値を持つ要素。
.class	クラス名：指定したclass属性の値を持つ要素。
セレクタ, セレクタ	グループ化：いずれかを満たす要素。
A B	子孫：A要素の子要素となるB要素。
A > B	直接の子：A要素の直下のB要素。
A + B	隣接：A要素の直後のB要素。
A ~ B	兄弟：A要素と同じ階層かつ後にあるB要素。

属性セレクタ

属性セレクターの書き方

[ 属性 ]のように[ ]で囲われた部分に属性を指定します。[ ]内には1つの属性を指定することができます。

書式	概要
[attr]	属性名：値は問わず、指定の属性を持つ要素。
[attr = ‘value’]	完全一致：指定の属性と値が完全一致する要素。
[attr ^= ‘value’]	前方一致：指定した属性の値が value で始まる要素。
[attr $= ‘value’]	後方一致：指定した属性の値が value で終わる要素。
[attr *= ‘value’]	値の部分一致：指定した属性の値に value を含む要素。
[attr ~= ‘value’]	一致する値を含む：指定した属性の値に value と一致するものを含む要素。
[attr |= ‘value’]	一致・派生：指定した属性の値が value と一致もしくは後方にハイフンが続く要素。

疑似クラス

子要素に関するもの

書式	概要
:first-child	兄弟要素の中で最初の要素。
:first-of-type	兄弟要素の中で指定した型の最初の要素。
:last-child	兄弟要素の中で最後の要素。
:last-of-type	兄弟要素の中で指定した型の最後の要素。
:nth-child(n)	兄弟要素の中で最初から数えてn番目の要素。
:nth-last-child(n)	兄弟要素の中で最後から数えてn番目の要素。
:nth-last-of-type(n)	兄弟要素の中で指定した型の最後から数えたn番目の要素。
:nth-of-type(n)	兄弟要素の中で指定した型の最初から数えたn番目の要素。
:only-child	兄弟要素が無い要素。
:only-of-type	兄弟要素の中に同じ型の要素がない要素。

フォームに関するもの

書式	概要
:checked	チェックされている要素。
:disabled	無効なフォーム要素。
:enabled	有効なフォーム要素。
:focus	フォーカスされている要素。

その他

書式	概要
:active	CSSのみ：クリック時等のアクティブな要素。
:empty	何も持たない要素。
:hover	CSSのみ：マウス等が要素上通過している状態の要素。
:lang()	指定された lang 属性の値を持つ要素。
:link	href属性を持つ訪問していない要素。
:not(セレクタ)	指定された要素以外の要素。
:root	ルート（html）要素。
:target	現在のURLにあるハッシュと同じidを持つ要素。

jQuery独自のフィルター

属性に関するもの

書式	概要
[attr != ‘value’]	jQueryのみ：指定の属性と値が完全に一致する要素以外の要素。

インデックスに関するもの

書式	概要
:eq(n)	非推奨 jQueryのみ：0から始まるインデックスで指定するn番目の要素。
:even	非推奨 jQueryのみ：インデックスが偶数となる要素。
:first	非推奨 jQueryのみ：最初の要素。
:gt(n)	非推奨 jQueryのみ：インデックスが nより大きい要素。
:last	非推奨 jQueryのみ：最後の要素。
:lt(n)	非推奨 jQueryのみ：インデックスが nより小さい要素。
:odd	非推奨 jQueryのみ：インデックスが奇数となる要素。

フォームに関するもの

書式	概要
:button	非推奨 jQueryのみ：<button> 又は <input type=”button”>要素。
:checkbox	非推奨 jQueryのみ：type 属性が checkbox の要素。
:file	非推奨 jQueryのみ：type 属性が file の要素。
:image	非推奨 jQueryのみ：type 属性が image の要素。
:input	非推奨 jQueryのみ：<input>, <select>, <textarea>, <button>要素。
:password	非推奨 jQueryのみ：type 属性が password の要素。
:radio	非推奨 jQueryのみ：type 属性が radio の要素。
:reset	非推奨 jQueryのみ：type 属性が reset の要素。
:selected	jQueryのみ：選択中の<option>要素
:submit	非推奨 jQueryのみ：type 属性が submit の要素。
:text	非推奨 jQueryのみ：type 属性が text の要素。

その他

書式	概要
:animated	jQueryのみ：アニメーション中の要素。
:contains(‘text’)	jQueryのみ：text を含む要素。
:has(‘セレクタ’)	jQueryのみ：指定したセレクタに該当する要素を子孫に持つ要素。
:header	jQueryのみ：見出し（h1～）要素。
:hidden	jQueryのみ：表示されていない要素。
:parent	jQueryのみ：子要素もしくはテキストを持つ要素。
:visible	jQueryのみ：表示されている要素。

参考リンク

jQuery.com
jQuery Deprecated（非推奨一覧）

MDN Web Docs
疑似クラス