jQuery API の jQuery( ':first' ) は、最初に一致した要素だけを選択する。
各親要素内のすべての先頭の子要素を選択したい場合は、jQuery( ':first-child' ) を使う。
記述方法
jQuery( 'セレクター:first' )
セレクターに一致した要素のうちの、最初に一致した要素だけを選択する。
記述例１
jQuery( 'li:first' )
li 要素のうちの最初の li 要素だけを選択。
記述例２
jQuery( '.jquery-api-first:first' )
クラス名が「jquery-api-first」の要素のうちの最初の要素だけを選択。
実装例（サンプル）
- 項目１
- 項目１－１
- 項目１－２
- 項目２
- 項目２－１
- 項目２－２
- 項目２－２－１
- 項目２－２－２
- 項目２－３
- 項目３
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '.jquery-api-first li:first' ) . css( {
border: '3px red double',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-api-first li:first' ) . css( {
border: '3px red double',
} );
} );
// -->
</script>
HTML
<ul class="jquery-api-first">
<li>項目１
<ul class="jquery-api-first">
<li>項目１－１</li>
<li>項目１－２</li>
</ul>
</li>
<li>項目２
<ul class="jquery-api-first">
<li>項目２－１</li>
<li>項目２－２
<ul class="jquery-api-first">
<li>項目２－２－１</li>
<li>項目２－２－２</li>
</ul>
</li>
<li>項目２－３</li>
</ul>
</li>
<li>項目３</li>
</ul>
<li>項目１
<ul class="jquery-api-first">
<li>項目１－１</li>
<li>項目１－２</li>
</ul>
</li>
<li>項目２
<ul class="jquery-api-first">
<li>項目２－１</li>
<li>項目２－２
<ul class="jquery-api-first">
<li>項目２－２－１</li>
<li>項目２－２－２</li>
</ul>
</li>
<li>項目２－３</li>
</ul>
</li>
<li>項目３</li>
</ul>