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

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

:first-of-typeセレクタで指定された最初の子要素を選択

構文

セレクタで指定された最初の子要素を選択
$("セレクタ:first-of-type")ver1.9〜
※:(コロン)を忘れないように注意しましょう
※セレクタで指定した要素のみを対象とします。

機能

セレクタに続き:(コロン)first-of-typeを設定すると親要素内にあるセレクタで指定された最初の要素を選択します。:first-childと異なり、セレクタで指定した要素が最初の子要素である必要はありません。

解説

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

サンプル(first-type/01.html)を開いてbody内に2つのdiv要素があることを確認してください。各div要素内には以下の様に3つのp要素が子要素として含まれています。

<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>

続いてjQueryを確認してください。以下の様に記述されbuttonをクリックするとp要素のうち最初の子要素を選択して、cssメソッドを利用して背景色をピンクにしています。

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

結果として、各div要素内の最初のp要素だけが選択されピンクになります。

:first-childとの違い

上記のサンプルfirst-type/01.htmlで説明したことは:first-childでも可能です(例:first-child/02.html)ので、違いを確認するために別のサンプルを紹介します。

サンプル(first-type/02.html)を開いてjQueryはfirst-type/01.htmlから変更がないことを確認してください。body内の構成は以下の様に変更され、最初のdiv要素内の先頭にh要素が追加されています。

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

このサンプルでbuttonをクリックすると各div要素内の最初のp要素が選択されます。

では、同じ構成のhtmlに対して:first-childを利用するとどうなるかを確認します。
サンプル(first-type/02b.html)を開いてbody内の構成はfirst-type/02.htmlと同じ事を確認してください。jQueryは以下の様に記述され:first-of-typeの代わりに:first-childを利用しています。

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

:first-childは子要素の先頭に指定したセレクタがないと選択されないため、最初のdiv要素内のp要素は選択されません(最初の子要素はh要素のため)。たぶん、このことが:first-childを使いにくくしているため、v1.9で:first-of-typeが追加されたのではないかと思います。

関連項目

セレクタで指定した最後の子要素を選択したい場合は:last-of-typeを利用します。
また、似たような機能の:first-childを確認して、違いを理解し、混乱しないようにしましょう。