リスト、テーブルやカラムを並べるデザインに: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を使うかという対応になります。
ハックを利用する
３番目を指定する場合
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>３つごとのliに「elem-third」というクラスが付加されます。
nth-childだけ対応させればいいだけなら、直接記述する方法でもいいのかも。
Selectivizrを利用する
css3セレクタをIE6~IE8に対応させることができるjavascriptライブラリです。
nth-child以外にも適用させたいcss3スタイルがあればこちらの方がいいですよね。
※利用するときはjqueryも一緒に（一緒に利用するライブラリによって、使えるcss3も違ってきます。詳しくは、selectivizrのトップページに表示あり）
:first-childはIE7から対応
:first-child擬似クラスは、IE７から対応しているためよく使われる擬似クラスですよね。
: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などよく使う疑似クラスのまとめでした。
