jQueryセレクターまとめ

:first 全体のうちの最初の要素1つ
:first-child 指定した要素の最初の子要素
:first-of-type 兄弟要素で最初のもの
:last 全体のうちの最後の要素1つ
:last-child 指定した要素の最後の子要素
:last-of-type 兄弟要素で最後のもの
:even 0から開始する偶数の要素(適用は1、3~)
:odd 0から開始する奇数の要素(適用は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>

RELATED POSTS