180520 追記 一部間違った記述があったので修正しました
はじめに
数学に弱いコーダーはnが入って来ると計算がわからなくなります。
だったら最初から覚えずによく使うものはメモするといいです。
特にX〜Yまで、という指定はよく使うと思います。
なるべく指定は短く書きたいですね。
基本
X番目
全ての基本です。
style.css
li:nth-child(X) {
}
最初のみ
first-childもありますが、記述スピードは(1)は、
同じくらいだと思います。編集性を考えてこちらの記述がいいと思います。
style.css
li:nth-child(1) {
}
最後のみ
last-childは数が変わっても常に最後を指定し続けます。
便利です。使いましょう。
style.css
li:last-child {
}
X~Y
X番目以前（最初からX番目まで）
style.css
li:nth-child(-n+X) {
}
X番目以降（X番目から最後まで）
style.css
li:nth-child(n+X) {
}
X番目からY番目まで
これが使えると、グッと記述が減らせます。
修正も楽ですよ。
style.css
li:nth-child(n+X):nth-child(-n+Y) {
}
X番目以外全部
notが絡むとよくわからなくなるのは私だけでしょうか。
style.css
li:not(:nth-child(X)) {
}
偶数奇数
偶数番目
nth-child(even)もありますが、そもそも(2n)の方が
早く書けるので使わなくていいです。
style.css
li:nth-child(2n) {
}
奇数番目
nth=child(odd)と(2n-1)、文字数はoddが少なくなりますが、後から変わった時の編集性を考えると2n-1がいいと思います。（たぶん）。
使い慣れれば、一目で奇数だな、とわかります。
style.css
li:nth-child(2n-1) {
}
ある条件の時、X番目からY番目を指定する
この辺を使えるようになると、記述をすごく減らせます。
X番目からY番目までの偶数ごとに
これも一行です。
style.css
li:nth-child(2n)li:nth-child(n+X):nth-child(-n+Y) {
}
X個以上の時、全てを選択
style.css
li:nth-last-child(n+X),
li:nth-last-child(n+X) ~ li {
}
X個以下の時、全てを選択
style.css
li:nth-last-child(-n+X):first-child,
li:nth-last-child(-n+X):first-child ~ li {
}