jQuery逆引きリファレンス

子要素の位置関係によって取得すべき要素を絞り込むには？ ― 子要素フィルター

2016年3月17日

:first-child／:last-childフィルターにより先頭／末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child／:nth-last-childフィルターにより先頭／末尾からn個おきに子要素を取得する方法を解説。

山田祥寛

る子要素の位置関係によって、取得すべき要素を特定できるようになります。

先頭／末尾の子要素を取得する

　:first-child／:last-childフィルターを利用することで、親要素から見て先頭／末尾に相当する要素だけを取得できます。例えば以下は、先頭／末尾の<li>要素に背景色を付与する例です。

HTML

<!DOCTYPE html>

<html>

<head>

<title>jQuery TIPS</title>

</head>

<body>

<li>小フーガト短調</li>

<li>トッカータとフーガニ短調</li>

<li>主よ、人の望みの喜びよ</li>

<li>シチリアーノ</li>

</ul>

<li>交響曲第3番変ホ長調（英雄）</li>

<li>ピアノソナタ第8番ハ短調（悲愴）</li>

<li>ピアノソナタ第14番嬰ハ短調（月光）</li>

</ul>

$(function() {

$('li:first-child').css('background-color', 'Yellow');

$('li:last-child').css('background-color', 'Lime');

});

</script>

</body>

</html>

先頭／末尾の子要素を特定するコード（firstChild.html）

▼

先頭／末尾の<li>要素に背景色が付与された

　別稿「TIPS：登場順序によって取得すべき要素を絞り込むには？」で登場した:first／:lastにも似ていますが、こちらは取得した要素セット全体から先頭／末尾の要素を取り出します。先ほどのリストを:first／:lastフィルターで書き換えて、結果の変化も確認しておきましょう。

JavaScript

$(function() {

$('li:first').css('background-color', 'Yellow');

$('li:last').css('background-color', 'Lime');

});

要素セットの先頭／末尾を特定するコード（firstChild.html）

▼

要素セットの先頭／末尾に当たる<li>要素に背景色が付与された

　:first／:lastフィルターは要素セット全体から先頭／末尾を認識しますので、それぞれ取り出されるべき要素は1つに特定されます。一方、first-child／:last-childフィルターでは、親要素を基点としてそれぞれの先頭／末尾の子要素を取り出しますので、親要素の数だけ先頭／末尾があるということです。

唯一の子要素である要素を取得する

　:only-childフィルターは、その要素が唯一の子要素である場合に、その要素を取得します。例えば以下は、<div>要素の配下に、<button>要素が1つだけ配置されている場合に、枠線を付与する例です。

HTML

<!DOCTYPE html>

<html>

<head>

<title>jQuery TIPS</title>

</head>

<body>

<div>

<button type="button">サポートサイトへ</button>

</div>

<div>

<button type="button">質問は掲示板へ</button>

<button type="button">他のページへ</button>

</div>

<div>

サンプルファイルはこちらから！

<button type="button">ダウンロード</button>

</div>

$(function() {

$('button:only-child').css('border', 'solid 5px Red');

});

</script>

</body>

</html>

唯一の子要素を特定するコード（only.html）

▼

<button>要素が唯一の子要素である場合、枠線を付与

　:only-childフィルターはあくまで要素が唯一であるかを判定するだけですので、本体テキストがあっても構わない点に注意してください。例えば最後の例は、<button>要素と並列にテキストはありますが、要素としては<button>が1つだけなので、セレクターとしては合致しています。

n個おきに子要素を取得する

　:nth-childフィルターを利用することで、n個おきに子要素を取得できます。他のフィルターに比べるとやや複雑な動きをしますので、まずは、具体的なコードをいくつか挙げていくことにしましょう。

　まずは、3個おきに<li>要素の文字色を赤に変化させる例です。

HTML

<!DOCTYPE html>

<html>

<head>

<title>jQuery TIPS</title>

</head>

<body>

<ul>

<li>小フーガト短調</li>

<li>トッカータとフーガニ短調</li>

<li>主よ、人の望みの喜びよ</li>

<li>シチリアーノ</li>

<li>交響曲第3番変ホ長調（英雄）</li>

<li>ピアノソナタ第8番ハ短調（悲愴）</li>

<li>ピアノソナタ第14番嬰ハ短調（月光）</li>

</ul>

$(function() {

$('li:nth-child(3n)').css('color', 'Red');

});

</script>

</body>

</html>

n個おきに要素を取得するコード（nth.html）

▼

3個おきに<li>要素の文字色が赤に変化

　:nth-childフィルターに渡された「3n」が「3個おき」を表します。nに対して0、1、2……と渡していったときの値（0、3、6……）が何番目の子要素に合致するかを表すわけです（ここでは、0、3、6……番目の要素）。

　同じく、3n+2のようにすることで、2、5、8……番目の要素を取り出すことができます。式を差し替えて、その変化を確認してみるのも良い勉強です。

「li:nth-child(3n+2)」の場合の結果

　その他、特別な値として「odd（奇数）」「even（偶数）」を指定することもできます。

「li:nth-child(even)」の場合の結果

　また、シンプルに固定値として「3」のような値を指定することで、3番目の要素を取り出すこともできます。

「li:nth-child(3)」の場合の結果

末尾からn個おきに子要素を取得する［1.9］

　:nth-childフィルターが前方から要素を数えるのに対して、後方から数えたい場合には:nth-last-childフィルターを利用します。例えば以下は、末尾から2、5、8……番目の要素を取り出す例です。

HTML

<!DOCTYPE html>

<html>

<head>

<title>jQuery TIPS</title>

</head>

<body>

<ul>

<li>小フーガト短調</li>

<li>トッカータとフーガニ短調</li>

<li>主よ、人の望みの喜びよ</li>

<li>シチリアーノ</li>

<li>交響曲第3番変ホ長調（英雄）</li>

<li>ピアノソナタ第8番ハ短調（悲愴）</li>

<li>ピアノソナタ第14番嬰ハ短調（月光）</li>

</ul>

$(function() {

$('li:nth-last-child(3n+2)').css('color', 'Red');

});

</script>

</body>

</html>

要素を末尾から数えるためのコード（nthLast.html）

▼

末尾から2、5、8……番目の要素の文字色を変更

処理対象：jQueryオブジェクト　カテゴリ：コア
API：jQuery()｜$()　カテゴリ：Core（コア）
処理対象：子要素フィルター　カテゴリ：セレクター
API：:first-childフィルター｜:last-childフィルター｜:only-childフィルター｜:nth-childフィルター｜:nth-last-childフィルター　カテゴリ：Selectors（セレクター） > Child Filter（子要素フィルター）
API：:firstフィルター｜:lastフィルター　カテゴリ：Selectors（セレクター） > Basic Filter（基本フィルター）

※以下では、本稿の前後を合わせて5回分（第39回～第43回）のみ表示しています。
　連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。

39. 登場順序によって取得すべき要素を絞り込むには？ ― 基本フィルター

jQueryの$()関数でフィルター構文を使い、先頭／末尾の要素や、偶数／奇数番目の要素、n番目／n番目より前や後の要素を取り出す方法を説明する。

2016年2月18日(木曜日)

40. 子要素／テキストによって取得すべき要素を絞り込むには？ ― コンテンツフィルター

:parent／:empty／:contains()／:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素／空の要素／特定のテキストを含む要素／指定されたセレクターに合致する子要素を持つ要素を取得できる。

2016年3月3日(木曜日)

41. 【現在、表示中】≫ 子要素の位置関係によって取得すべき要素を絞り込むには？ ― 子要素フィルター

2016年3月17日(木曜日)

42. 子要素の型／順番によって取得すべき要素を絞り込むには？ ― 子要素フィルター

:first-of-type／:last-of-typeフィルターにより同じ要素の中で先頭／末尾の子要素を、また:only-of-typeフィルターにより同列の子要素に同種の要素が1つしかないものを、さらに:nth-of-type／nth-last-of-typeフィルターにより同じ要素の中でn番目の要素を取得する方法を解説。

2016年3月31日(木曜日)

43. 指定された言語に対応する要素を取得するには？ ― :langフィルター

:langフィルターを使って、コンテンツの言語を指定するlang属性の値に応じて要素を取得する方法を説明する。

2016年4月13日(水曜日)

jQuery逆引きリファレンス