構文セレクタで指定した子要素が1つしかない要素を選択$("セレクタ:only-child")ver1.1.4〜※:(コロン)を忘れないように注意しましょう※唯一の子要素がセレクタと一致しない場合は選択されません。機能セレクタに続き:(コロン)only-childを設定すると親要素内にあるセレクタで指定された要素が1つしかないときに選択します。唯一の子要素が指定したセレクタでない時は選択されないことに注意してください。:only-of-typeを利用してください。解説セレクタで指定した子要素が1つしかない要素を選択しますサンプル(only-child/01.html)を開いてbody内にol要素とul要素のリストが2つずつあることを確認して下さい。各リストにはli要素が1つしかないものがあります。複数のセレクタ(and)を利用してli要素と組み合わせました。そのためbuttonをクリックすると親要素内に「1つしかない子要素のli要素」を選択します。cssメソッドを利用して背景色をピンクに変更しています。$("button").click(function(){$("li:only-child").css("background-color","#FCC");});色々な要素で利用できます:only-childはulとliのような決まった親子関係以外の構造でも利用できます。サンプル(only-child/02.html)を開いてbody内の構成を確認してください。3つのdiv要素があり子要素としてp要素を持っています、そして真ん中のdiv要素には1つはp要素が1つしか有りません。jQueryは以下の様に記述され、buttonをクリックすると親要素内に1つしかないp要素を選択します。$("button").click(function(){$("p:only-child").css("background-color","#FCC");});結果として、buttonをクリックするとp要素が1つしかない真ん中のdiv要素内のp要素が選択され、背景色がピンクになります。:only-of-typeが追加されたことに対し、違いを明確にするために追記されました。サンプル(only-child/03.html)を開いてbody内の構成を確認してください。以下の様に2番目のdiv要素にh要素が追加されています。</p></div>jQueryはonly-child/02.htmlから変更無く以下の様に記述されています。$("button").click(function(){$("p:only-child").css("background-color","#FCC");});ここで勘違いしがちなのは:only-childの前にp要素があるため「p要素が1つの場合だけ」選択されるのでは?という点です。実際はp要素に関係なく、他の要素が存在しても選択されません。このサンプルの:only-childの考え方としては「単独の子要素がp要素の場合だけ」となります。実際にbuttonをクリックしてもp要素は選択されません。:only-of-typeを利用してください。:only-of-typeを確認して、違いを理解し、混乱しないようにしましょう。