:first-child

このエントリーをはてなブックマークに追加

first-child擬似クラスは同一の親要素内の最初の子要素を検索できるセレクタです。

<ul>
<li id="list1">list1</li>
<li id="list2">list2</li>
<li id="list3">list3</li>
<li id="list4">list4</li>
</ul>

このようなHTMLがあった場合、次のセレクタでは#list1のjQueryオブジェクトを返します。

$("li:first-child")

では、つぎのようなHTMLの場合はどうでしょうか?

<ul>
<li id="list1">list1</li>
<li id="list2">list2</li>
<li id="list3">list3</li>
<li id="list4">list4</li>
</ul>
<ul>
<li id="list5">list5</li>
<li id="list6">list6</li>
<li id="list7">list7</li>
<li id="list8">list8</li>
</ul>

この場合は#list1と#list5を含んだjQueryオブジェクトを返します。このようにfirst-child擬似クラスでは同一の親要素内の最初の子要素を検索できます。

最初ではなく最後の要素はlast-child擬似クラスで検索可能です。

参考URL

:first-child Selector – jQuery API

登録日 : 2012年09月25日 最終更新日 : 2012年9月25日

同じカテゴリー(Selectors)のエントリー

検索

スポンサードリンク

バージョン

リファレンス