■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要素が複数含まれるため、色は変わりません。
|
|---|
（後編に続きます）
ソーシャルリアクション
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery＋CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応！jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー！プリロード対応版
- この連載の一覧へ
