jQueryのセレクターまとめ

jQueryでもCSSのようにセレクタを使って要素を選択できます。

jQueryで親要素・子要素・兄弟要素を取得する関数はこちら

取り扱うセレクター一覧

:first全体のうちの最初の要素1つ
:first-child指定した要素の最初の子要素
:first-of-type兄弟要素で最初のもの
:last全体のうちの最後の要素1つ
:last-child指定した要素の最後の子要素
:last-of-type兄弟要素で最後のもの
:even0から開始する偶数の要素（適用は1、3～）
:odd0から開始する奇数の要素（適用は2、4～）
:nth-of-type(番号/偶数/奇数/方程式)指定されたインデックス番号、または奇数(odd)、偶数(even)の要素
:nth-child(番号/偶数/奇数/方程式)親要素の指定されたインデックス番号、または奇数(odd)、偶数(even)の子要素
:nth-last-child(番号/偶数/奇数/方程式)親要素の最後から数えたインデックス番号、または奇数(odd)、偶数(even)の子要素
:nth-last-of-type(番号/偶数/奇数/方程式)最後から数えたインデックス番号、または奇数(odd)、偶数(even)の要素
:only-child兄弟要素を持たない要素
:only-of-type同じ要素名の兄弟要素を持たない要素

:first

全体のうちの最初の要素1つを選択する。

<div class="wrap">
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('.wrap p:first').css('color', 'red');
});
</script>

:first-child

最初の子要素が指定した要素だったら選択される。該当する要素がなかった場合はスキップされる。

<div class="wrap">
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
<div class="wrap">
  <h3>テキストテキスト</h3>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
<div class="wrap">
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('.wrap p:first-child').css('color', 'red');
});
</script>

:first-of-type

兄弟要素で最初のものを選択する。

<div class="wrap">
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
<div class="wrap">
  <h3>タイトル</h3>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
</div>
<div class="wrap">
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('.wrap p:first-of-type').css('color', 'red');
});
</script>

:last

全体のうちの最後の要素1つを選択する。

<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
</div>
 
<script>
$(function(){
$('.wrap p:last').css('color', 'red');
});
</script>

:last-child

指定した要素の最後の子要素を選択する。該当する要素がなかった場合はスキップされる。

<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
</div>
<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <div>テキストテキスト</div>
</div>
<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
</div>
 
<script>
$(function(){
  $('.wrap p:last-child').css('color', 'red');
});
</script>

:last-of-type

兄弟要素で最後のもの。

<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
</div>
<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <div>テキストテキスト</div>
</div>
<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
</div>
 
<script>
$(function(){
  $('.wrap p:last-of-type').css('color', 'red');
});
</script>

:even

0から開始する偶数の要素（適用は1、3～）を選択する。

<div class="wrap">
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('.wrap p:even').css('color', 'red');
});
</script>

:odd

0から開始する奇数の要素（適用は2、4～）を選択する

<div class="wrap">
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
</div>
 
<script>
$(function(){
  $('.wrap p:odd').css('color', 'red');
});
</script>

:nth-of-type(番号/偶数/奇数/方程式)

指定されたインデックス番号、または奇数(odd)、偶数(even)、方程式の要素を選択する。
下記の例ではh2要素は除外して数えられている。

<div class="wrap1">
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<div class="wrap2">
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
</div>
 
<div class="wrap3">
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('.wrap1 p:nth-of-type(3)').css('color', 'red');
  $('.wrap2 p:nth-of-type(even)').css('color', 'blue');
  $('.wrap3 p:nth-of-type(3n)').css('color', 'green');
});
</script>

:nth-child(番号/偶数/奇数/方程式)

親要素に対し、指定されたインデックス番号、または奇数(odd)、偶数(even)の子要素を選択する。
下記の例ではh2要素も含めて数えられている。

<div class="wrap1">
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<div class="wrap2">
  <h2>タイトル</h2>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
</div>
 
<div class="wrap3">
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('.wrap1 p:nth-child(3)').css('color', 'red');
  $('.wrap2 p:nth-child(even)').css('color', 'blue');
  $('.wrap3 p:nth-child(3n)').css('color', 'green');
});
</script>

:nth-last-child(番号/偶数/奇数/方程式)

親要素の最後から数えたインデックス番号、または奇数(odd)、偶数(even)の子要素を選択する。
下記の例ではh2要素も含めて数えられている。

<div class="wrap1">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
</div>
 
<div class="wrap2">
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
</div>
 
<div class="wrap3">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('.wrap1 p:nth-last-child(3)').css('color', 'red');
  $('.wrap2 p:nth-last-child(even)').css('color', 'blue');
  $('.wrap3 p:nth-last-child(3n)').css('color', 'green');
});
</script>

:nth-last-of-type(番号/偶数/奇数/方程式)

最後から数えたインデックス番号、または奇数(odd)、偶数(even)の要素を選択する。
下記の例ではh2要素は除外して数えられている。

<div class="wrap1">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
</div>
 
<div class="wrap2">
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
</div>
 
<div class="wrap3">
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト←ここに適用される</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('.wrap1 p:nth-last-of-type(3)').css('color', 'red');
  $('.wrap2 p:nth-last-of-type(even)').css('color', 'blue');
  $('.wrap3 p:nth-last-of-type(3n)').css('color', 'green');
});
</script>

:only-child

兄弟要素を持たない要素を選択する。

<div>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<div>
  <p>テキストテキスト←ここに適用される</p>
</div>
 
<div>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('p:only-child').css('color', 'red');
});
</script>

:only-of-type

同じ種類の兄弟要素を持たない要素を選択する。

<div>
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
  <h2>タイトル</h2>
  <p>テキストテキスト</p>
</div>
 
<div>
<h2>タイトル←ここに適用される</h2>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>
</div>
 
<script>
$(function(){
  $('h2:only-of-type').css('color', 'red');
});
</script>