nth-child擬似クラス

セレクターの要素から指定した番号の要素だけにスタイルを適用することが出来、「:」を使う擬似クラス:nth-child()で指定します。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“li:nth-child(3)”).css(“color”,”#FF0000″);
});
</script>

【HTML】
<ul>
 <li>米ドル</li>
 <li>ユーロ</li>
 <li>豪ドル</li>
 <li>英ポンド</li>
 <li>南アランド</li>
</ul>

nth-child擬似クラスサンプル

3番目の要素豪ドルだけにスタイルが適用されます。
また、奇数番目を指定するときは$(“li:nth-child(odd)”)、
偶数番目を指定するときは$(“li:nth-child(even)”)という書き方も出来ます。

This entry was written by admin , posted on 月曜日 4月 11 2011at 07:04 am , filed under CSS and tagged , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.