このページの本文へ

初めてのjQuery:セレクターAPIを一挙解説(前編) (6/6)

2009年07月30日 10時00分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

■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要素が複数含まれるため、色は変わりません。



後編に続きます)

前へ 1 2 3 4 5 6 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く