リスト、テーブルやカラムを並べるデザインに:nth-child/:first-child/:last-childは大活躍する疑似クラスです。
()の中に変数nを入れれば○番目以降、○番目〜○番目という指定ができて便利です。:nth-childの使い方まとめと勘違いしやすい部分などをまとめました。
使い方の基本
共通のhtml
<div class="wrapper">
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem">3</div>
<div class="elem">4</div>
<div class="elem">5</div>
</div>
○番目のエレメントを指定する

.elem:nth-child(3){ background-color:aqua; }
奇数、偶数を指定する

/* ※奇数 */ .elem:nth-child(odd){ background-color:aqua; } /*又は*/ .elem:nth-child(1+2n){ background-color:aqua; } /* ※奇数 */ .elem:nth-child(even){ background-color:bisque; } *又は*/ .elem:nth-child(2n){ background-color:bisque; }
○番目以降をすべて指定する

.elem:nth-child(n+3){ background-color: aqua; }
○番目以前を指定する

.elem:nth-child(-n+3){
background-color:aqua;
}
○番目〜○番目を指定

.elem:nth-child(n+2):nth-child(-n+4){
background-color:aqua;
}
3個ずつ(3の倍数)指定する

.elem:nth-child(3n){
background-color:aqua;
}
IE8以下での対応
:nth-child疑似クラスはIE8以下は対応していないため、ハックを使うかjQueryを使うかという対応になります。
ハックを利用する
3番目を指定する場合
ul>*:first-child + * + * { color : red; }
:first-childは ie8に対応しています。
jsを使いたくない場合はこの方法で。でも○番目ごとになどは難しい。
jQueryで対応する
jqueryで「addClass」を定義して対応することができます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".elem:nth-child(3n)") .addClass("elem-third"); }); </script>
3つごとのliに「elem-third」というクラスが付加されます。
nth-childだけ対応させればいいだけなら、直接記述する方法でもいいのかも。
Selectivizrを利用する
css3セレクタをIE6~IE8に対応させることができるjavascriptライブラリです。
nth-child以外にも適用させたいcss3スタイルがあればこちらの方がいいですよね。
※利用するときはjqueryも一緒に(一緒に利用するライブラリによって、使えるcss3も違ってきます。詳しくは、selectivizrのトップページに表示あり)

:first-childはIE7から対応
:first-child擬似クラスは、IE7から対応しているためよく使われる擬似クラスですよね。

:first-child擬似クラスは、親要素の一番最初の直下の子要素に適用されます。勘違いしやすいので改めてまとめます。
勘違い例
article内にある最初のp要素にスタイルを適用したい場合。
<article class="demo1"> <h2>タイトルなんちゃら</h2> <p>テキストほげほげ</p> <p>テキストほげほげ</p> <p>テキストほげほげ</p> </article>
css
.demo1 p:first-child{ color:#f00; }
articleの最初の子要素は「h2」なので適用されません。
【解決方法1】 隣接セレクタを使う
.demo1 h2+p{ color:#f00; }
【解決方法2】 :first-of-typeを使う
:first-of-type疑似クラスとは、指定した種類の最初の要素に適用される。
対応しているのはIE9以降なのでそこ注意
.demo1 p:first-of-type{ color:#f00; }
:nth-childと:nth-of-type
似ている疑似クラスですが違いは以下のようになります。
:nth-childは子要素の中で何番目かを指定できる。
:nth-of-typeは選択した要素の何番目かを指定できる。
:nth-of-typeの例
<div class="wrapper">
<div class="elem">1</div>
<div class="elem">2</div>
<p>P1</p>
<div class="elem">3</div>
<div class="elem">4</div>
<div class="elem">5</div>
<p>P2</p>
</div>
.wrapper p:nth-of-type(2){
background-color:aqua;
}
.wrapperの中にある2番目のp要素を指定できます。
以上、nth-childなどよく使う疑似クラスのまとめでした。