jQuery Logo $() 関数/セレクタ

作成日：2015年7月4日

jQuery の基本的なこと

jQuery の基本的な操作は、HTML ページから要素を取り出して、それらに対して処理を行います。そして jQuery では CSS の知識を活用して、JavaScript を単純化することができます。

jQuery() 関数 / $() 関数

CSS の基本的な構文は以下のようなものでした。

セレクタ { プロパティ: 値; }

例えばそのページの全ての p 要素の中のリンク（a 要素）の色を指定するには以下のようにセレクタ（p a）を使って記述します。

p a {
  color: green;
}

jQuery でも同様のセレクタを使用することができます。更に jQuery 独自のセレクタも使うことができます。

jQuery で要素をグループにまとめる場合は、以下の簡単な構文を使って jQuery 関数にセレクタを渡します。

jQuery(セレクタ)　または　$(セレクタ)

$() 関数は jQuery()関数の別名です。

そのページの全ての p 要素の中のリンク（a 要素）を選択するには、以下のように記述します。

$("p a")
  • $() 関数が返すのは DOM 要素の配列を含む特別な JavaScript オブジェクト（jQuery オブジェクト）になります。
  • その配列には、セレクタとマッチする要素（jQuery オブジェクト）が、文書の中で定義された順番に並んで入っています。
  • そしてこのオブジェクトには、集められた要素グループに対して利用できる数多くの便利なメソッドがあらかじめ定義されています。

jQuery が定義するメソッドから操作できる、「マッチした要素の集合」を jQuery ラッパー、またはラップ集合（wrapped set）と呼んだりします。

以下のような HTML がある場合、 $("p a") とすると、マッチするのは２つの要素になります。

<div>
<h3>jQuery Sample</h3>
<p class="someClass">sample paragraph with some class</p>
<p id="someID">With Some ID</p>
<p><a href="#">simple paragraph with link</a></p>
<p class="someClass"><a href="#">paragraph with link and some class</a></p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="someClass">list item 3 (with some class)</li>
</ul>
</div>

jQuery オブジェクトには、そのオブジェクトの数を返す length というプロパティがあるのでそれを利用して、以下のように記述することができます。

alert($("p a").length);  // 2 と表示されます。

それでは、以下のように記述した場合、どの要素が選択されるでしょうか？

<div>
  <h3>jQuery Sample</h3>
  <p class="someClass">sample paragraph with some class</p>
  <p id="someID">With Some ID</p>
  <p><a href="#">simple paragraph with link</a></p>
  <p class="someClass"><a href="#">paragraph with link and some class</a></p>
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class="someClass">list item 3 (with some class)</li>
  </ul>
</div>

以下のリンクをクリックすると、選択された要素の文字色が赤に変わり、そして太字になります。

$("p")

$("p a")

$(".someClass")

$("#someID")

$("li")

$("li.someClass")

jQuery Sample

sample paragraph with some class

With Some ID

simple paragraph with link

paragraph with link and some class

  • list item 1
  • list item 2
  • list item 3 (with some class)

例えば、someClass というクラス名を持つ要素を全て隠すには以下のように記述します。

$(".someClass").hide();

$(".someClass").hide();

上記の記述で隠した要素をフェードインで表示させるには、以下のように記述します。

$(".someClass").fadeIn();

$(".someClass").fadeIn();

jQuery の基本的な書式

jQuery を利用したスクリプトでは、HTML のどの要素を操作するかを「セレクター」で指定し、操作する内容を記述します。

以下のように$("...") の内側に セレクタを記述し、その後ろに ドット（ . ）で命令を記述します。

$("セレクター").jQuery の命令 ;

まず、対象となる要素をセレクタを使って選択（検索）し、それらの要素に jQuery の命令を使って操作（処理）をします。

また、jQuery を記述する際は、ほとんどの場合 ready 関数を記述し、その中（内側）に処理を記述します。

jQuery(function($){
  $(".someClass").hide();  // ready 関数の中に処理を記述
  ...... 
});

但し、以降では記述が長くなるため、ready 関数の記述は省略します。

操作する要素の選択/セレクタ

jQueryでは、CSS セレクタを使って簡単に要素を選択することができます。要素を選択するには、セレクタを $() 関数でラップします。

$("p a.specialClass")	
//specialClassというクラスを持ち p 要素の子孫である全てのアンカー(a)要素

jQueryでは、全ての CSS セレクタを利用することができます。

jQuery セレクタ
名称 書式 指定対象
CSS でよく利用されるセレクタ
要素セレクタ $("要素名") 特定の要素
ID セレクタ $("#ID名") 特定の id 属性を持つ要素
クラスセレクタ $("．クラス名") 特定の class 属性を持つ要素
子孫セレクタ $("要素1　要素2") 特定の要素の内側にある要素
ユニバーサルセレクタ $("*") 全ての要素
グループ $("セレクタ1, セレクタ2, …") 複数のセレクタ
CSS2 のセレクタ
子セレクタ $("親要素名 ＞ 子要素名") 特定の要素の直下の子要素
隣接セレクタ $("要素1 + 要素2") 特定の要素の次の要素
first-child 擬似セレクタ $("要素：first-child") 同一要素内の最初の要素
CSS3 のセレクタ
間接セレクタ $("要素1 ～ 要素2") 特定の要素の後に出現する要素
否定擬似クラス $("要素1:not(要素2)") 特定の要素のうち要素2の条件を除く要素
empty 擬似クラス $("要素:empty") 子要素やテキストを含まない要素
nth-child 擬似クラス $("要素:nth-child(番号)") 特定の要素のうち指定した番号の要素
last-child 擬似クラス $("要素:last-child") 同一要素内の最後の要素
only-child 擬似クラス $("要素:only-child") 特定の要素が１つだけ含まれる要素
CSS の属性セレクタ
[attribute] $("[属性名]") 特定の属性を持つ要素
[attribute='value'] $("[属性名='値']") 特定の属性が指定した値を持つ要素
[attribute!='value'] $("[属性名!='値']") 特定の属性が指定した値を持たない要素
[attribute^='value'] $("[属性名^='値']") 特定の属性が指定した値で始まっている要素
[attribute$='value'] $("[属性名]$='値'") 特定の属性が指定した値で終わっている要素
[attribute*='value'] $("[属性名*='値']") 特定の属性が指定した値を含んでいる要素
[attributeFilter1][attributeFilter2] $("[属性セレクタ１]　[属性セレクタ２]") 複数の属性セレクタに該当する要素
jQuery の独自フィルター
first フィルター $("要素:first") 指定した要素の最初の要素
last フィルター $("要素:last") 指定した要素の最後の要素
even フィルター $("要素:even") 指定した要素の偶数番目の要素
odd フィルター $("要素:odd") 指定した要素の奇数番目の要素
eq フィルター $("要素:eq(番号)") 指定した番号の要素（番号は 0 から数える）
gt フィルター $("要素:gt(番号)") 指定した番号より後の要素（番号は 0 から数える）
lt フィルター $("要素:lt(番号)") 指定した番号より前の要素（番号は 0 から数える）
header フィルター $("要素:header") h1～h6 までの heading 要素
contains フィルター $("要素:contains(文字列)") 特定の文字列が含まれている要素
has フィルター $("要素:has(要素2)") 特定の要素が含まれている要素
parent フィルター $("要素:parent") 子要素やテキストを含む要素

コンテクストの制御

 $( 'セレクタまたはHTML断片', 'コンテクスト')

$()関数にセレクタまたは HTML 断片を渡す場合、第2の引数を受け取るバージョンがあります。第1の引数がセレクタだった場合、第2の引数は、 その処理のコンテクストを示します。　オプションの第2引数を省略すると、コンテクストはページ全体になります。

コンテクストには、DOM 要素の参照を使えますが、jQueryセレクタを含む文字列を使うことも、ラップされた DOM 要素集合を使うことも可能です。 

$("li:last").css("color", "red");
//第2引数を指定していないのでコンテクストはページ全体

$("li:last", "ul#sample").css("color", "red");
//第2引数に"ul#sample"を指定しているので、sample という id 属性を持つ ul 要素が対象となる。

CSSでよく利用されるセレクタ

要素セレクタ

特定の HTML 要素に対して命令を実行する場合に使用します。

$("li").css("color", "green");	
//全ての li 要素の color プロパティを green に変更
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$("li").css("color", "green");

  • list item 1
  • list item 2
  • list item 3
  • list item 4

上記で使用している css() は、選択された要素のスタイル（CSS）を設定するメソッド（命令）です。

ID セレクタ

特定の id 属性を持つ要素に対して命令を実行する場合に使用します。id 属性の値に #（ハッシュ）をつけたものをセレクタとします。

id属性だけでも要素は特定でますが、要素名をわかりやすくするために、要素セレクタと ID セレクタをつなげても同じ指定ができます。（間にスペースは入れません。スペースを入れると「子孫セレクタ」になり、意味が異なります。） 

$("#special").css("color", "red"); 
//id属性に「special」が設定された要素のcolorプロパティを red に変更 

$("li#first").css("color", "red"); 
//上記と同じ
<ul>
  <li id="test">list item 1</li>
  <li>list item 2</li>
  <li id="special">list item 3</li>
  <li>list item 4</li>
</ul>

$("#special").css("color", "red");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
クラスセレクタ

特定のクラス属性を持つ要素に対して命令を実行する場合に使用します。class属性の値に .（ドット）をつけたものをセレクタとします。

ID セレクタと同様に、要素名をわかりやすくするために、要素セレクタとつなげても同じ指定ができます。（間にスペースは入れません。スペースを入れると「子孫セレクタ」になり、意味が異なってしまいます。）

* クラスセレクタは ID セレクタと違って、複数の異なる要素に適用される場合があるので、そのような場合はこの方法を使うと便利です。

$(".even").css("color", "orange"); 
//class属性に「even」が設定された要素のcolorプロパティを変更 

$("li.even").css("color", "orange"); 
//上記と同じ
<ul>
  <li>list item 1</li>
  <li class="even">list item 2</li>
  <li>list item 3</li>
  <li class="even">list item 4</li>
</ul>

$("li.even").css("color", "orange");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
子孫セレクタ

複数のセレクタをスペース区切りで指定することにより、特定の要素の内側にある要素に対して命令を実行することができます。

$(".odd a").css("color", "red"); 
//class属性が「odd」の要素の内側にある a 要素の color プロパティを変更
<ul>
  <li class="odd">list <a href="#">item 1</a></li>
  <li class="even">list <a href="#">item 2</a></li>
  <li class="odd">list <a href="#">item 3</a></li>
  <li class="even">list <a href="#">item 4</a></li>
</ul>

$(".odd a").css("color", "red");

ユニバーサルセレクタ

全ての要素を選択できるセレクタです。*（アスタリスク）で記述します。 

$("li *").css("color", "pink");
//li要素内に含まれる全ての要素（この場合、* は li の子孫セレクタになっている要素。* と li の間にはスペース。）	
<ul>
  <li><strong>list</strong> item 1</li>
  <li><em>list</em> item 2</li>
  <li>list item 3</li>
  <li>list item <span>4</span></li>
</ul>

$("li *").css("color", "pink");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
グループセレクタ

複数のセレクタを,（カンマ）区切りで並べて指定することで、それぞれのセレクタに対する命令をまとめて記述することができます。 

$(".item1, .item4").css("color", "blue"); 
//id属性が「item1」と「item4」の要素
<ul>
  <li class="item1">list item 1</li>
  <li class="item2">list item 2</li>
  <li class="item3">list item 3</li>
  <li class="item4">list item 4</li>
</ul>

$(".item1, .item4").css("color", "blue");

  • list item 1
  • list item 2
  • list item 3
  • list item 4

$.escapeSelector()

$.escapeSelector() を使うと、セレクタで CSS において特別な意味を持つ文字(ドットやセミコロン)をエスケープすることができます。これは jQuery3.0 で新しく導入されたメソッドです。（ jQuery Core 3.0 Upgrade Guide）

例えば、ID属性が "abc.def" という属性名にドット（.）が付いた要素は、$( "#abc.def" ) という書き方では、ID が #abc でクラスが .def と解釈されてしまい選択（抽出）することができませんでした。jQuery3.0 からでは $.escapeSelector() を使えば、以下のようにその要素を選択できるようになります。

<p id="abc.def">ID が abc.def の要素</p> 
$( "#" + $.escapeSelector( "abc.def" ) ).css("color", "red");

CSS2 のセレクタ

子セレクタ

特定の要素の直下に配置された要素（直接の子要素のみ）を選択します。 親要素と子要素を >（大なり不等号）で結びます。

$("li > em").css("color", "red"); 
// li 要素の直接の子要素である em 要素 
<ul>
    <li>list <em>item 1</em></li>
    <li><span>list <em>item 2</em></span></li>
    <li>list <a href="#"><em>item 3</em></a></li>
    <li><em>list item 4</em></li>
</ul>

$("li > em").css("color", "red");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
隣接（兄弟）セレクタ

特定の要素の次に出現する要素を選択します。（ある要素が文書ツリー中で、同じ要素を親に持つ要素の 直後に出現する要素。） 隣接する要素を +（プラス）で指定します。 （隣接する要素は兄弟関係にあるものです。つまり、同じ要素を親に持っています。）

$(".item3 + li").css("color", "orange"); 
//class 属性が「item3」の要素の次に出現する li 要素 
<ul>
  <li class="item1">list item 1</li>
  <li class="item2">list item 2</li>
  <li class="item3">list item 3</li>
  <li class="item4">list item 4</li>
</ul>

$(".item3 + li").css("color", "orange");

  • list item 1
  • list item 2
  • list item 3
  • list item 4

別の例です。

$("dt + dd").css("color", "red"); 
//同じ dl 要素を親に持つ dt 要素と dd 要素のうち、dt 要素の直後に出現する dd 要素 
<dl>
  <dt>#1 definition term</dt>
  <dd>definition description 1</dd>
  <dd>definition description 2</dd>
  <dd>definition description 3</dd>
  <dt>#2 definition term</dt>
  <dd>definition description A</dd>
  <dd>definition description B</dd>
  <dd>definition description C</dd>
</dl>

$("dt + dd").css("color", "red");

#1 definition term
definition description 1
definition description 2
definition description 3
#2 definition term
definition description A
definition description B
definition description C
first-child擬似クラス

特定のセレクタのうち、最初に登場する要素を指定するセレクタです。（特定の要素の最初の子要素を選択。） セレクタの後ろに :first-child と記述して指定します。セレクタに含まれる要素の親要素が複数存在する場合は、それぞれの最初に出現する子要素が選択されます。

$("li:first-child").css("color", "green"); 
//最初に登場する li 要素
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

<ul>
  <li>list item A</li>
  <li>list item B</li>
  <li>list item C</li>
  <li>list item D</li>
</ul>

$("li:first-child").css("color", "green");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item A
  • list item B
  • list item C
  • list item D

CSS3 のセレクタ

間接セレクタ

特定のセレクタの後に出現する要素を選択します。セレクタと要素を ~（チルダ）で結びます。 

$(".item2 ~ li").css("color", "red"); 
//class 属性が「item2」が設定された要素の後ろに登場する li 要素
<ul>
  <li class="item1">list item 1</li>
  <li class="item2">list item 2</li>
  <li class="item3">list item 3</li>
  <li class="item4">list item 4</li>
</ul>

$(".item2 ~ li").css("color", "red");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
否定擬似クラス

セレクタ内の要素で、特定の条件以外の要素を選択します。セレクタの後ろに :not(...) を付け、(...) 内に除外する条件を記述します。

$("li:not(.item2, .item3)").css("color", "blue"); 
//class 属性の値が「item2」と「item3」以外の li要素。（2番目以降の li要素）
<ul>
  <li class="item1">list item 1</li>
  <li class="item2">list item 2</li>
  <li class="item3">list item 3</li>
  <li class="item4">list item 4</li>
</ul>

$("li:not(.item2, .item3)").css("color", "blue");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
empty 擬似クラス

子要素やテキストを含まない要素を選択します。セレクタの後ろに :empty と記述します。

$("li:empty").css("color", "red"); 
//空の li要素
<ul>
  <li>list item 1</li>
  <li></li>
  <li>list item 3</li>
  <li><span></span></li>
</ul>

$("li:empty").css("color", "red");

  • list item 1
  • list item 3
nth-child 擬似クラス

セレクタの要素から任意の番号の要素を選択します。セレクタの後ろに :nth-child(番号) と記述します。但し、:nth-childフィルタは（CSSとの互換性のため）１から数えますが、ほかのセレクタは 0 から数えるので注意が必要です。

$("li:nth-child(3)").css("color", "red"); 
//3番目の li要素

番号ではなく、偶数・奇数や任意の倍数でも指定可能です。

$("li:nth-child(even)") //偶数番目
$("li:nth-child(odd)") //奇数番目
$("li:nth-child(3n)") //3の倍数番目
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$("li:nth-child(3)").css("color", "red");

$("li:nth-child(even)").css("color", blue");

$("li:nth-child(odd)").css("color", "orange");

$("li:nth-child(2n)").css("font-style", "italic");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
last-child 擬似クラス

特定のセレクタの中で最後の要素を選択します。セレクタの後ろに :last-child と記述します。セレクタに含まれる要素の親要素が複数存在する場合は、それぞれの最後に出現する子要素が選択されます。

$("li:last-child").css("font-weight", "bold");
//最後のli要素
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$("li:last-child").css("font-weight", "bold");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
only-child 擬似クラス

セレクタに特定の要素が１つだけ含まれる場合選択します。セレクタの後ろに:only-child と記述します。

$("li span:only-child").css("color", "red");　
//li要素の中に span 要素が１つだけある span 要素
<ul>
  <li>list <span>item 1</span></li>
  <li>list item 2</li>
  <li><span>list</span> item <span>3</span></li>
  <li><span>list item 4</span></li>
</ul>

$("li span:only-child").css("color", "red");

  • list item 1
  • list item 2
  • list item 3
  • list item 4

CSS の属性セレクタ

jQuery は、要素の属性や属性値を条件に対象を絞り込める「属性セレクタ」に対応しています。それぞれ [...] 内に条件を記述します。

[attribute]

特定の属性を持つ要素に対して命令を実行する場合に使用します。

$("[id]").css("color", "red"); 
//id属性を持つ全ての要素
<ul>
  <li id="top">list item 1</li>
  <li class="itme">list item 2</li>
  <li class="itme">list item 3</li>
  <li class="itme" id="bottom">list item 4</li>
</ul>

$("[id]").css("color", "red");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
[attribute='value']

特定の属性が、特定の値を持つ要素に対して命令を実行する場合に使用します。

$("[title='item 2']").css("color", "blue"); 
//title属性の値が「item 2」の要素
<ul>
  <li title="item 1">list item 1</li>
  <li title="item 2">list item 2</li>
  <li title="item 3">list item 3</li>
  <li title="item 4">list item 4</li>
</ul>

$("[title='item 2']").css("color", "blue");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
[attribute!='value']

特定の属性が、特定の値を持たない要素に対して命令を実行する場合に使用します。このセレクタは要素セレクタの後に続けて記述する必要があります。

$("li[class!='normal']").css("color", "red"); 
//class 属性の値が「normal」以外の li要素
<ul>
  <li class="warning">list item 1</li>
  <li class="normal">list item 2</li>
  <li>list item 3</li>
  <li class="danger">list item 4</li>
</ul>

$("li[class!='normal']").css("color", "red");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
[attribute^='value']

特定の属性の値が、特定の文字列で始まっている要素に対して命令を実行する場合に使用します。

$("[href^='https']").css("color", "orange"); 
//href 属性の値が「https」で始まる要素 
<ul>
  <li><a href="http://sample1.com">list item 1</a></li>
  <li><a href="https://sample2.com">list item 2</a></li>
  <li><a href="http://sample3.com">list item 3</a></li>
  <li><a href="https://sample4.com">list item 4</a></li>
</ul>

$("[href^='https']").css("color", "orange");

※ jQuery3 を使用する場合の注意： jQuery3 からは、ページトップやページ内のリンクを抽出する場合、$('a[href^=#]') などの「#」の部分を $('a[href^="#"]') のように # を引用符で囲む必要があります。そうしないと「Syntax error, unrecognized expression: [href^=#]」のようなエラーが発生します。（jQuery3 では "#"のみのセレクタは不正な文法としてエラーになることと関係しているかも知れません）

[attribute$='value']

特定の属性の値が、特定の文字列で終わっている要素に対して命令を実行する場合に使用します。（特定の拡張子を選択するのに便利）

$("[src$='.png']").fadeOut(); 
//src属性の値が「.jpg」で終わっている要素を隠す 
<ul>
  <li><img src="fireworks.jpg" alt=""></li>
  <li><img src="whitney.jpg" alt=""></li>
  <li><img src="msg.png" alt=""></li>
  <li><img src="soho.jpg" alt=""></li>
</ul>

$("[src$='.png']").fadeOut();

[attribute*='value']

特定の属性の値が、特定の文字列を含んでいる要素に対して命令を実行する場合に使用します。

$("[class*='jazz']").css("color", "red"); 
//class 属性の値に「jazz」を含む要素
<ul>
  <li class="jazz">list item 1</li>
  <li class="classic">list item 2</li>
  <li class="classic_jazz">list item 3</li>
  <li class="rock">list item 4</li>
</ul>

$("[class*='jazz']").css("color", "red");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
[attributeFilter1][attributeFilter2]

複数の属性セレクタを同時に指定することも可能です。全ての条件を満たした要素が選択されます。

$("[class^='w'][id*='2']").css("color", "orange"); 
// class 属性が「w」から始まり、かつ id 属性の値に「2」が含まれる要素
<ul>
  <li class="wine" id="item1">list item 1</li>
  <li class="water" id="item2">list item 2</li>
  <li class="food" id="item3">list item 3</li>
  <li class="beer" id="item4">list item 4</li>
</ul>

$("[class^='w'][id*='2']").css("color", "orange");

  • list item 1
  • list item 2
  • list item 3
  • list item 4

jQuery の独自フィルター　

CSS セレクタ以外に、jQuery の独自のセレクタ（フィルター）が利用できます。

first / last フィルター

セレクタの中から最初の要素を「firstフィルター」、最後の要素を「lastフィルター」で選択することができます。

$("li:first").css("color", "red"); //最初のli要素
$("li:last").css("color", "blue"); //最後のli要素
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

$("li:first").css("color", "red");

$("li:last").css("color", "blue");

  • list item 1
  • list item 2
  • list item 3
  • list item 4

first / last フィルターは指定したセレクタで最初（最後）に登場する要素を選択するのに対し、 first-child / last-child 擬似クラスは共通の親要素を持つ要素から最初（最後）の要素を選択します。

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

<ul>
<li>list item A</li>
<li>list item B</li>
<li>list item C</li>
<li>list item D</li>
</ul>

$("li:first").css("color", "red");

$("li:last").css("color", "blue");

$("li:first-child").css("color", "orange");

$("li:last-child").css("color", "green");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item A
  • list item B
  • list item C
  • list item D
even / odd フィルター

セレクタの中から偶数番目に出現する要素を「evenフィルター」で、奇数番目に出現する要素を「oddフィルター」で選択します。

$("li:odd").css("color", "green"); //奇数番目のli要素
$("li:even").css("color", "orange"); //偶数番目のli要素
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<ul>
  <li>list item A</li>
  <li>list item B</li>
  <li>list item C</li>
</ul>

$("li:odd").css("color", "green");

$("li:even").css("color", "orange");

  • list item 1
  • list item 2
  • list item 3
  • list item A
  • list item B
  • list item C

nth-child 擬似クラスの nth-child(even), nth-child(odd) との違いは、nth-child 擬似クラスが共通の親要素を持つ要素から奇数（偶数）の要素を選択するのに対して、odd/even フィルターは指定したセレクタで 奇数（偶数）に登場する要素を選択します。

更に :nth-childフィルタは（CSSとの互換性のため）１から数えますが、odd/even フィルターは 0 から数えるので奇数（偶数）が反転するので注意が必要です。

また、複数の ul 要素があれば最初の ul 要素の最後の li 要素が奇数番目であれば、 次の ul 要素の最初の li 要素は偶数番目と数えられます。

eqフィルター、ltフィルター、gtフィルター

セレクタの中から特定の順番の要素を「eq フィルター」(equal)で選択します。

特定の要素より前の要素を「lt フィルター」（less than）で選択します。

特定の要素より後の要素を「gt フィルター」（greater than）で選択します。

要素は登場する順番を数値で指定します。

JavaScriptは0から数値を数えるため、1番目は0を、2番目は1を、3番目は2を指定します。

$("li:lt(2)").css("color", "orange"); //1番目(0)と2番目(1)の要素
$("li:eq(2)").css("color", "blue"); //3番目(2)の要素
$("li:gt(2)").css("color", "red"); //4番目(3)以降の要素
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

$("li:lt(2)").css("color", "orange");

$("li:eq(2)").css("color", "blue");

$("li:gt(2)").css("color", "red");

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6
headerフィルター

h1～h6 までの heading 要素をまとめて選択します。

$(":header").css("color", "green"); 
//全てのheading要素（h1～h6）
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>sample text</p>
<h4>Heading 4</h4>
<p>sample text</p>

$(":header").css("color", "green");

Heading 2

Heading 3

sample text

Heading 4

sample text

containsフィルター/hasフィルター

「containsフィルター」は内容に特定の文字列が含まれている要素を選択します。

「hasフィルター」は特定の要素が含まれている要素を選択します。

$("li:contains('Jazz')").css("color", "red"); 
// サンプルという文字列が含まれるli要素

$("li:has(span)").css("color", "orange");
//strong要素を含むli要素
<ul>
<li>Rock</li>
<li>Pops</li>
<li>Jazz</li>
<li>Hip <span>Hop</span></li>
</ul>

$("li:contains('Jazz')").css("color", "red");

$("li:has(span)").css("color", "orange");

  • Rock
  • Pops
  • Jazz
  • Hip Hop

「hasフィルター」は子孫セレクタとちょうど逆の関係にあります。例えば、p 要素の子孫である全ての span 要素を選択するには、「p span」という子孫セレクタを使いますが、逆に span 要素を含む全ての p 要素を選択するには「p:has(span)」を使います。

<p>Lorem ipsum dolor sit amet.</p>
<p>Dolorum, <span>praesentium</span>, reprehenderit.</p>
<p>Quasi, natus, iusto, eveniet.</p>
<p>Aperiam et veritatis officiis.</p>
<p>Dolor illum <span>optio unde nisi!</span>.</p>

$("p span").css("color", "red");

$("p:has(span)").css("color", "orange");

Lorem ipsum dolor sit amet.

Dolorum, praesentium, reprehenderit.

Quasi, natus, iusto, eveniet.

Aperiam et veritatis officiis.

Dolor illum optio unde nisi!.

parent フィルター

何らかの子要素やテキストを含む要素を選択します。empty 擬似クラスと逆のフィルターになります。

$("li:parent").css("color", "red"); 
//空のli要素以外のli要素
<ul>
  <li>list item 1</li>
  <li></li>
  <li>list item 3</li>
  <li><span></span></li>
</ul>

$("li:parent").css("color", "red");

  • list item 1
  • list item 3

その他のフィルタ

以下は主にフォームに関連するフィルタです。例えばチェックされた状態にあるチェックボックスを選択する場合は「:checkbox:checked」のように記述します。（関連：フォームの操作）

CSS と jQuery のカスタムフィルタセレクタ
セレクタ 説明 CSSにもある？
:animated 現在アニメーションで制御されている要素だけを選択
:button ボタン要素だけを選択。 (input[type=submit], input[type=reset], input[type=button], button)
:checkbox チェックボックス要素だけを選択。(input[type=checkbox])
:checked チェックされた状態にあるチェックボックスまたはラジオ要素だけを選択 ○
:disabled 無効な状態にある要素だけを選択 ○
:enabled 有効な状態にある要素だけを選択 ○
:file ファイル入力要素だけを選択（input[type=file])
:hidden 隠された状態にある要素だけを選択
:image 画像入力要素だけを選択（input[type=image]）
:input フォーム要素だけを選択（input, select, textarea, button）
:password パスワード要素だけを選択（input[type=password]）
:radio ラジオ要素だけを選択（input[type=radio]）
:reset リセットボタンだけを選択（input[type=reset], button[type=reset]）
:selected 選択された状態の<option>要素だけを選択
:submit 送信（submit）ボタンだけを選択（button[type=submit], input[type=submit]）
:text テキスト要素だけを選択（input[type=text]）
:visible 可視な要素だけを選択