◆ n は0以上の整数すべて
◆ :nth-child を複数つけるとANDで絞り込める 

どこかのサイトで nth-child の説明で 「n」 は1からそこに実際に存在する要素の数までと書いてました
要素が5つのところなら n は1, 2, 3, 4, 5ということです

あれ?そうだっけ

それなら n-1 で最後以外ができるし 他にも 2n+1 で1つめが選択されないようなー

と思ったので調べてみました


結果 n は0以上の整数です


n と書くとすべての要素になります
:nth-child(n)

n+3 で3つめ以降になります
:nth-child(n+3)

最後以外をしたいなら 4つ要素があるなら
:nth-child(-n+3)

になります

また
:not(:nth-child(4))
ともかけます

ですが
:nth-child(3-n)
とは書けないです (なんで?!


:nth-childを使う方法では 4番目が最後ということを知らないといけません

:nth-last-child というセレクタもあるので
:nth-last-child(n+2)
にすれば 最後の要素が何番目かを知らなくても簡単にできます


倍数を指定したい時
:nth-child(n*2)
とはできませんが
:nth-child(2n)
で偶数を表せます



では偶数かつ3の倍数のもの(6の倍数)にスタイルをあてたいときはどうするのか
:nth-child(2n):nth-child(3n)
これでいけるんです

複数 :nth-child をつけると すべて満たされたものだけが選ばれます
指定するものを増やすことでどんどん絞り込んでいくのはスタイルシートの基本ですが ここでも使えます

div.a.bdivの中で aクラスがあるもの さらに bクラスもあるものというように
div:nth-child(2n):nth-child(3n)divの中で 2の倍数で さらに 3の倍数のもの となるわけです

この組み合わせを使うことで
:nth-child(n+4):nth-child(-n+7)
こうかけば 4~7番目 と指定できます

:nth-last-childも使って
:nth-child(n+3):nth-last-child(n+2)
3つめから最後から2つめまで と指定もできます


実際の結果は↓のページで
http://var.blog.jp/s/nth-child-sample.html