デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:first-child最初の子要素を選択

構文

最初の子要素を選択
$("セレクタ:first-child")ver1.1.4〜
※:(コロン)を忘れないように注意しましょう
※最初の子要素がセレクタと一致しない場合は選択されません。

機能

セレクタに続き:(コロン)first-childを設定すると親要素内にある最初の要素を選択します。:firstと異なり、ページを通したインデックス番号で管理されることはなく、最初の子要素をまとめて選択したいときに便利です。

また指定したセレクタが最初の子要素でない時は選択されないことに注意してください。セレクタで指定した最初の子要素を選択したい場合は:first-of-typeを利用してください。

解説

最初の子要素を選択します

サンプル(first-child/01.html)を開いてbody内にol要素とul要素の2つのリストがあることを確認して下さい。各リストにはli要素が5つづつあります。jQueryは以下の様に記述され、複数のセレクタ(and)を利用してli要素と組み合わせました。そのためbuttonをクリックすると親要素内にある「最初のli要素」を選択します。選択した要素はcssメソッドを利用して背景色をピンクに変更しています。

$("button").click(function(){
	$("li:first-child").css("background-color","#FCC");
});

:first-childでポイントなのは、ページ全体で最初の要素が選択されるのではなく親要素の範囲内での最初の要素が選択される点です。ですのでサンプルfirst-child/01.htmlではol内で最初のli要素と、ul内で最初のli要素が選択されるのです。

参考として:firstのサンプルを紹介します。サンプル(first-child/01b.html)を開いてbody内の構成はfirst-child/01.htmlと同じ事を確認してください。jQueryのセレクタを以下の様に:firstに変更しただけです。

$("button").click(function(){
	$("li:first").css("border","3px solid red");
});

:firstの場合は親要素に関わらずページ全体で最初のliが選択されるためulの最初のli要素は選択されません。2つの違いを理解して混乱しないようにしましょう。

色々な要素で利用できます

:first-childはulとliのような決まった親子関係以外の構造でも利用できます。サンプル(first-child/02.html)を開いてbody内の構成を確認してください。div要素内にp要素があります。jQueryは以下の様に記述され、親要素内にある最初のp要素を選択しています。

$("button").click(function(){
	$("p:first-child").css("border","3px solid red");
});

結果として、buttonをクリックすると各div要素内で最初のp要素が選択され、背景色がピンクになります。

最初の子要素限定です

この項はv1.9で:first-of-typeが追加されたことに対し、違いを明確にするために追記されました。

:first-childの注意点としては指定したセレクタが最初の子要素でないといけない点です。
サンプル(first-child/03.html)を開いてjQueryが前項のfirst-child/02.htmlと同じ事を確認してください。

$("button").click(function(){
	$("p:first-child").css("border","3px solid red");
});

続いてbody内の構成を確認すると、最初のdiv要素内の最初にh要素が追加され、これが上のdiv要素の最初の子要素となっています。

<div>
	<h4>見出し</h4>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>

その結果、buttonをクリックしても最初のdiv要素にあるp要素は選択されません。これは最初の子要素がセレクタで指定したp要素ではないためです。つまり:first-childは最初の子要素がセレクタで指定した要素だったら選択という機能なのです

もし最初のdiv要素でも最初のp要素を選択したい場合はv1.9で追加された:first-of-typeを利用してください。

この構成で各div要素内の最初の要素を種類にかかわらず選択するサンプルはページ最下段のメモ「最初の子要素を要素にかかわらず選択」で紹介しています。

関連項目

最後の子要素を選択したい場合は:last-childを利用します。
ページを通して最初の要素を選択したい場合は:firstを利用します。
セレクタで指定した最初の要素を選択したい場合は:first-of-typeを利用します。

メモ

最初の子要素を要素にかかわらず選択

サンプルfirst-child/03.htmlを作成して思ったのですが、もし要素にかかわらず最初の子要素を選択(つまりh要素も選択)したい場合はどう記述すれば良いのでしょうか?

:first-childに>(子要素)を組みあわせることで実現できました。サンプル(first-child/test01.html)を開いてbody内の構成がfirst-child/03.htmlと同じ事を確認してください。jQueryは以下の様に変更されています。

$("button").click(function(){
	$("div>:first-child").css("background-color","#FCC");
});

これでdiv要素の子要素で最初の要素が選択されるようになります。実際にbuttonをクリックするとh要素もp要素も選択されます。

上記のサンプルは少し省略しており、厳密に書くのであれば、以下の様に*(すべて)を使います。つまり「div要素内の最初の要素は何でも」選択という意味です。→参考:サンプル(first-child/test01b.html

$("button").click(function(){
	$("div>*:first-child").css("background-color","#FCC");
});

実際にサンプル(first-child/test01b.html)でbuttonをクリックするとfirst-child/test01.htmlと同じようにh要素もp要素も選択されます。