jQueryにおける:first-childと:firstの違い

jQueryには「:first-child」というセレクタと「:first」というセレクタが存在しており、混同されがちですが異なる意味を持っております。

例えば、次のようなHTMLがあるとします。

<ul>
	<li>list1-1</li>
	<li>list1-2</li>
	<li>list1-3</li>
	<li>list1-4</li>
</ul>
<ul>
	<li>list2-1</li>
	<li>list2-2</li>
	<li>list2-3</li>
	<li>list2-4</li>
</ul>

:first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。

$("li:first-child").css("color","red");

サンプル

一方:firstで指定できるのは「<li>list1-1</li>」のみです。

$("li:first").css("color","red");

サンプル

:firstはセレクタで指定した要素のうち最初に登場した要素を指定できるのに対して、:first-childはセレクタで指定した要素のうち最初に登場した子要素を指定できます。

<dl>
	<dt>list1-1</dt>
	<dd>list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1</dd>
	<dt>list1-2</dt>
	<dd>list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2</dd>
</dl>

このようなHTMLでlist1-1のdd要素を指定したいと考えた場合、:first-childでは指定できません。

$("dd:first-childe").css("color","red");

サンプル

これは、dl要素内の最初の子要素がdt要素でdd要素ではない為です。

こういった場合では:firstを利用することで指定できます。

$("dd:first").css("color","red");

サンプル

:lastや:last-childでも同様の挙動をとります。

細かい違いではあるのですが、ついついははまってしまう原因になる箇所ですので注意が必要です。

関連エントリー

jQuery基礎文法最速マスター
8の jQueryのすごいTIPS
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
jQueryを使ったサンプルコード

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)Web制作の現場で使う jQueryデザイン入門

実務で使えるサンプル100本超の作成を通じて、手を動かしながらjQueryの基礎からしっかり学べる1冊です。

スポンサードリンク

«Web制作の現場で使う jQueryデザイン入門が増刷、ネットショップでの販売が再開 | メイン | FacebookのLike Button(いいねボタン)の設置»