最初の要素を選択$(":first")ver1.0〜※:(コロン)を忘れないように注意しましょう機能:(コロン)に続けてfirstを設定すると最初の要素を選択します。単独では利用しませんサンプル(first/01.html)を開いてbody内にdiv要素が4つあることを確認してください。jQueryは以下の様に記述され、buttonをクリックすると最初の要素を選択するようにしています。cssメソッドを利用して赤枠を表示しています。red");});documentの最初の要素はhtml要素になるため、buttonをクリックするとhtml要素にボーダーが描かれます。ほとんどの場合、他のセレクタと組みあわせて利用されます。他のセレクタと組みあわせるサンプル(first/02.html)を開いてbody内の構成がfirst/01.htmlと同じ事を確認してください。複数のセレクタ(and)を利用してdiv要素で最初の要素を選択します。cssメソッドを利用して背景色を緑にします。$("button").click(function(){$("div:first").css("background-color","#9F9");});結果として、buttonをクリックすると最初のdiv要素が選択され背景色が緑になります。ページ全体を通しての最初です要素はページ内を通してインデックス番号で管理されます。サンプル(first/03.html)を開いてbody内にol要素とul要素の2つのリストがあることを確認して下さい。各リストにはli要素が5つづつあります。cssメソッドを利用して背景色をピンクにします。$("button").click(function(){$("li:first").css("background-color","#FCC");});ul要素とol要素は異なるリストですが、li要素はulとolで共通のためul/olを通して連続したインデックス番号が設定されます。その結果、buttonをクリックするとol要素の最初のli要素が選択され、背景色がピンクになります。ul要素内にある最初のli要素を選択するには?ではul要素の中にある最初のli要素を選択したい場合はどうすればよいのでしょうか?サンプル(first/04.html)を開いてbody内の構成を確認してください。li要素のテキストが異なるだけで、それ以外はサンプルfirst/03.htmlと同じになっています。>(子要素)を利用して、ul要素の子要素であるli要素の最初の要素を選択するようにしました。$("button").click(function(){$("ul>li:first").css("background-color","#FCC");});サンプルfirst/04.htmlではul要素内にli要素しかないので、liの記述は省略しても同じです。サンプル(first/04b.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。選択される要素はサンプルfirst/04.htmlと同じになります。:lastと合わせて覚えると良いでしょう。:first-childを利用すると便利です。メモ他のセレクタと:firstの組合せ+(直近の後要素)を利用すると直後の要素を選択できますが、指定した要素が直後でない場合は選択されません。サンプル(first/test01.html)を開いてbody内を確認して、以下の様にh2要素の後にh3要素とp要素があることを確認して下さい。<h2>見出し2</h2><h3>見出し3</h3><p>段落</p><p>段落</p><p>段落</p>続いてjQueryを確認して、セレクタが「h2+p」と記述されていることを確認して下さい。この場合はh2要素の直後にあるp要素を選択しますが、直後はh3要素のためbuttonをクリックしても、何も選択されません。~(後要素)を利用すると、1つだけでなく全てのp要素が選択されてしまいます。→サンプル(first/test01b.html)$("button").click(function(){$("h2~p").css("background-color","#FCC");});そこで利用するのが:firstです。サンプル(first/test02.html)を開いて、セレクタが以下の様に変更されているのを確認して下さい。first/test01b.htmlの記述に:firstを追加することで、最初のp要素だけを選択します。$("button").click(function(){$("h2~p:first").css("background-color","#FCC");});結果として、buttonをクリックするとh2要素に一番近いp要素を選択できるようになります。