構文セレクタと引数で指定された子要素を選択$("セレクタ:nth-of-type(引数)")ver1.9〜※:(コロン)を忘れないように注意しましょう※引数には様々な値を設定できます。解説を参照してください。※セレクタで指定した要素のみ選択の対象となります。機能セレクタに続き:(コロン)nth-of-typeを設定するとセレクタと引数で指定された要素を選択します。:nth-child()と異なり、セレクタで指定した要素のみが選択の対象となります。引数にインデックス番号を利用サンプル(nth-type/01.html)を開いてbody内に2つのdiv要素があることを確認してください。各div要素内には以下の様に4つのp要素が子要素として含まれています。p要素の順番が分かりやすいように()内に番目を記載しました。(4番目)</p></div>続いてjQueryを確認してください。cssメソッドを利用して背景色をピンクにしています。:nth-child同様にインデックス番号は1から始まります。$("button").click(function(){$("p:nth-of-type(3)").css("background-color","#FCC");});結果として、各div要素内のセレクタで指定した最後のp要素だけが選択されピンクになります。:nth-childでも可能です(例:nth-child/02.html)ので、違いを確認するために別のサンプルを紹介します。サンプル(nth-type/02.html)を開いてjQueryはnth-type/01.htmlから変更がないことを確認してください。body内の構成は以下の様に変更され、上のdiv要素内の先頭にh要素が追加されています。(4番目)</p></div>このサンプルでbuttonをクリックすると各div要素内の3番目のp要素が選択されます。h要素はセレクタで指定されたp要素ではないためカウントされないことに注意して下さい。:nth-child()を利用するとどうなるかを確認します。サンプル(nth-type/02b.html)を開いてbody内の構成はnth-type/02.htmlと同じ事を確認してください()内の説明は変更しています。jQueryは以下の様に記述され:nth-of-typeの代わりに:nth-childを利用しています。要素もカウントします。この違いを確認するために、もう1つサンプルを確認します。サンプル(nth-type/03.html)を開いてbody内の上のdiv要素が以下の様に変更されているのを確認して下さい。h要素が3番目の位置に移動しています。(4番目)</p></div>jQueryはnth-child/02.htmlから変更されていません。buttonをクリックすると上のdiv要素でh要素はカウントされず、3番目のp要素が選択されることを確認して下さい。:nth-child()では3番目の要素がp要素でないため、上のdiv要素の子要素は選択できません。サンプル(nth-child/06b.html)でbuttonをクリックし上のdiv要素では子要素が選択されないのを確認してください。:nth-child()は似ていますが、考え方が異なるので間違えないように気を付けてください。引数にodd/evenや数式が利用できるのは:nth-childと同じです:nth-child()と同じように引数にodd(奇数)/even(偶数)が利用できます。サンプル(nth-type/04.html)を開いてbody内の構成はnth-type/03.htmlと同じことを確認して下さい。jQueryは以下の様に変更され、:nth-of-typeの引数にodd(奇数)が設定されているのを確認して下さい。$("button").click(function(){$("p:nth-of-type(odd)").css("background-color","#FCC");});結果として上下のdiv要素とも奇数番目のp要素が選択されます。上のdiv要素を確認すると分かるように、途中にあるh要素はやはりカウントされません。同じようにeven(偶数)を利用したサンプルも確認しておいて下さい。→サンプル(nth-type/04b.html)あとnを利用した数式も利用できます。サンプル(nth-type/05.html)を開いてbody内の構成はnth-type/04.htmlと同じことを確認して下さい。jQueryは以下の様に変更され、引数に「3n+1」と設定されています。4)のp要素が選択されます。ここでも途中にあるh要素はカウントされていません。:nth-child()との違いなので覚えておきましょう。:nth-last-of-type()を利用して下さい。:nth-child()を確認して、違いを理解し、混乱しないようにしましょう。メモn(自然数)についてサンプル(nth-type/05.html)の説明で数式のnは0から始まると説明しており、実際その通りの番目が選択されます。number)を意味しているので1から始まるのでは?と思っていました。調べてみると日本では1から始めますが、世界的には0から始めるケースもあるようです。