最初の子要素を選択$("セレクタ:first-child")ver1.1.4〜※:(コロン)を忘れないように注意しましょう※最初の子要素がセレクタと一致しない場合は選択されません。機能セレクタに続き:(コロン)first-childを設定すると親要素内にある最初の要素を選択します。:firstと異なり、ページを通したインデックス番号で管理されることはなく、最初の子要素をまとめて選択したいときに便利です。指定したセレクタが最初の子要素でない時は選択されないことに注意してください。:first-of-typeを利用してください。最初の子要素を選択しますサンプル(first-child/01.html)を開いてbody内にol要素とul要素の2つのリストがあることを確認して下さい。各リストにはli要素が5つづつあります。複数のセレクタ(and)を利用してli要素と組み合わせました。そのためbuttonをクリックすると親要素内にある「最初のli要素」を選択します。cssメソッドを利用して背景色をピンクに変更しています。$("button").click(function(){$("li:first-child").css("background-color","#FCC");});:first-childでポイントなのは、ページ全体で最初の要素が選択されるのではなく親要素の範囲内での最初の要素が選択される点です。サンプルfirst-child/01.htmlではol内で最初のli要素と、ul内で最初のli要素が選択されるのです。:firstのサンプルを紹介します。サンプル(first-child/01b.html)を開いてbody内の構成はfirst-child/01.htmlと同じ事を確認してください。jQueryのセレクタを以下の様に:firstに変更しただけです。red");});:firstの場合は親要素に関わらずページ全体で最初のliが選択されるためulの最初のli要素は選択されません。2つの違いを理解して混乱しないようにしましょう。色々な要素で利用できます:first-childはulとliのような決まった親子関係以外の構造でも利用できます。サンプル(first-child/02.html)を開いてbody内の構成を確認してください。div要素内にp要素があります。jQueryは以下の様に記述され、親要素内にある最初のp要素を選択しています。red");});結果として、buttonをクリックすると各div要素内で最初のp要素が選択され、背景色がピンクになります。:first-of-typeが追加されたことに対し、違いを明確にするために追記されました。:first-childの注意点としては指定したセレクタが最初の子要素でないといけない点です。サンプル(first-child/03.html)を開いてjQueryが前項のfirst-child/02.htmlと同じ事を確認してください。red");});続いてbody内の構成を確認すると、最初のdiv要素内の最初にh要素が追加され、これが上のdiv要素の最初の子要素となっています。</p></div>その結果、buttonをクリックしても最初のdiv要素にあるp要素は選択されません。これは最初の子要素がセレクタで指定したp要素ではないためです。:first-childは最初の子要素がセレクタで指定した要素だったら選択という機能なのです。:first-of-typeを利用してください。この構成で各div要素内の最初の要素を種類にかかわらず選択するサンプルはページ最下段のメモ「最初の子要素を要素にかかわらず選択」で紹介しています。:last-childを利用します。:firstを利用します。:first-of-typeを利用します。>(子要素)を組みあわせることで実現できました。サンプル(first-child/test01.html)を開いてbody内の構成がfirst-child/03.htmlと同じ事を確認してください。jQueryは以下の様に変更されています。$("button").click(function(){$("div>:first-child").css("background-color","#FCC");});これでdiv要素の子要素で最初の要素が選択されるようになります。実際にbuttonをクリックするとh要素もp要素も選択されます。*(すべて)を使います。「div要素内の最初の要素は何でも」選択という意味です。→参考:サンプル(first-child/test01b.html)$("button").click(function(){$("div>*:first-child").css("background-color","#FCC");});実際にサンプル(first-child/test01b.html)でbuttonをクリックするとfirst-child/test01.htmlと同じようにh要素もp要素も選択されます。