セレクターその１３（nth-child擬似クラス[CSS3]）

jQuery セレクター

こ、これは・・・！！
テーブル行の背景色を交互に変更したい場合なんかにものすげー役に立つぞ！

特定のセレクターから指定した番号の要素だけを指定できる。
セレクターの後ろに :nth-child(番号) と記述する。

チーと長いが、後でみて参考にするためにも。。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        $("li:nth-child(3)").css("color","red");
        $("#table0 tr:nth-child(even)").css("background-color","pink");
        $("#table1 tr:nth-child(odd)").css("background-color","lightgreen");
        $("#table2 tr:nth-child(3n)").css("background-color","lightblue");
      })
    </script>
  </head>
  <body>
    <ul>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
    </ul>
    <table>
      <tr>
	<td>
	  <span>偶数行の背景色をピンクに</span>
	  <table id="table0" border="1">
	    <tr><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td></tr>
	    <tr><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr>
	    <tr><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr>
	    <tr><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td></tr>
	    <tr><td>な</td><td>に</td><td>ぬ</td><td>ね</td><td>の</td></tr>
	  </table>
	</td>
	<td rowspan="2">
	  <span>３行飛ばしで背景色を薄い青に</span>
	  <table id="table2" border="1">
	    <tr><td>ア</td><td>イ</td><td>ウ</td><td>エ</td><td>オ</td></tr>
	    <tr><td>カ</td><td>キ</td><td>ク</td><td>ケ</td><td>コ</td></tr>
	    <tr><td>サ</td><td>シ</td><td>ス</td><td>セ</td><td>ソ</td></tr>
	    <tr><td>タ</td><td>チ</td><td>ツ</td><td>テ</td><td>ト</td></tr>
	    <tr><td>ナ</td><td>ニ</td><td>ヌ</td><td>ネ</td><td>ノ</td></tr>
	    <tr><td>ハ</td><td>ヒ</td><td>フ</td><td>ヘ</td><td>ホ</td></tr>
	    <tr><td>マ</td><td>ミ</td><td>ム</td><td>メ</td><td>モ</td></tr>
	    <tr><td>ヤ</td><td>ヰ</td><td>ユ</td><td>ヱ</td><td>ヨ</td></tr>
	    <tr><td>ラ</td><td>リ</td><td>ル</td><td>レ</td><td>ロ</td></tr>
	    <tr><td>ワ</td><td>ヲ</td><td>ン</td><td></td><td></td></tr>
	  </table>
	</td>
      </tr>
      <tr>
	<td>
	  <span>奇数行を背景色を薄い緑に</span>
	  <table id="table1" border="1">
	    <tr><td>は</td><td>ひ</td><td>ふ</td><td>へ</td><td>ほ</td></tr>
	    <tr><td>ま</td><td>み</td><td>む</td><td>め</td><td>も</td></tr>
	    <tr><td>や</td><td>ゐ</td><td>ゆ</td><td>ゑ</td><td>よ</td></tr>
	    <tr><td>ら</td><td>り</td><td>る</td><td>れ</td><td>ろ</td></tr>
	    <tr><td>わ</td><td>を</td><td>ん</td><td></td><td></td></tr>
	  </table>
	</td>
      </tr>
    </table>
  </body>
</html>

いいねいいね〜。