■nth-child擬似クラス
特定のセレクターから指定した番号の要素だけを指定できるのが「nth-child擬似クラス」です。セレクターの後ろに :nth-child(番号) と記述します。
▼サンプルコード(HTML部分)
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード(スクリプト部分)
$(function(){
$("li:nth-child(3)").css("color","red");
})
▼実行結果(実際のWebページ)
3番目のli要素だけが赤色になります。
nth-child擬似クラスは、$("li:nth-child(even)") で偶数番目のli要素を、$("li:nth-child(odd)") で奇数番目のli要素を指定できます。また、$("li:nth-child(3n)") と記述することで、3の倍数番目の要素を指定できます。
■last-child擬似クラス
特定のセレクターの中で最後の要素だけを指定できるのが「last-child擬似クラス」です。セレクターの後ろに :last-child と記述します。
▼サンプルコード(HTML部分)
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード(スクリプト部分)
$(function(){
$("li:last-child").css("color","red");
})
▼実行結果(実際のWebページ)
最後のli要素(ここでは4番目のli要素)だけが赤色になります。
■only-child擬似クラス
セレクターの中に特定の要素が1つだけ含まれる場合、その要素を指定できます。セレクターの後ろに :only-child と記述します。
▼サンプルコード(HTML部分)
<ul>
<ul>
<li><span>テキスト</span>テキストテキストテキストテキスト</li>
<li><span>テキスト</span>テキスト<span>テキスト</span>テキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード(スクリプト部分)
$(function(){
$("li span:only-child").css("color","red");
})
▼実行結果(実際のWebページ)
1行目のspan要素だけが赤色になります。2行目のli要素にはspan要素が複数含まれるため、色は変わりません。
(後編に続きます)
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。