今さらな内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。
CSSの擬似クラスにある:nth-child:nth-last-childの使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。

説明時に利用しているサンプルイメージやコードは、ul内に10個のli要素を記述してデフォルトで青いボックスが並んでいる見た目になるようCSSを指定しています。
それを:nth-child:nth-last-childを使って指定されたものを赤いボックスに変化させており、実際のブラウザ表示を見たい場合はCodePenにデモをアップしておいたのでこちらをご覧ください。

先頭 or 最後からx番目を指定

基本的な使い方で、:nth-child(x)または:nth-last-child(x)xの部分に数値を記述すれば「先頭 or 最後からx番目に」という指定になります。

例:先頭 or 最後から3番目を指定

先頭 or 最後から3番目を指定したイメージ

/* 先頭から... */
ul li:nth-child(3) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(3) {
  background-color: #e74c3c;
}

先頭 or 最後からxの倍数を指定

:nth-child(xn)または:nth-last-child(xn)のように記述し、xの部分に数値を記述することで「先頭 or 最後からxの倍数に」という指定になります。

例:先頭 or 最後から3の倍数を指定

先頭 or 最後から3の倍数を指定したイメージ

/* 先頭から... */
ul li:nth-child(3n) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(3n) {
  background-color: #e74c3c;
}

先頭 or 最後から指定数+α or -αを指定

上で数値や倍数で指定する方法を紹介しましたが、そこへ更に+1-2といったように数値を足したり引いたりする指定方法もあり、上で紹介したものでは指定できないとか指定できたとしても複数記述しないといけないのがこの方法を使うことで1行で指定可能になります。

例:先頭 or 最後から3の倍数+1を指定

先頭 or 最後から3の倍数+1を指定したイメージ

1, 4, 7, 10のように上で紹介した倍数指定では指定できず、数値指定の場合は複数指定しないといけなかったものが1行で指定できます。

/* 先頭から... */
ul li:nth-child(3n+1) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(3n+1) {
  background-color: #e74c3c;
}

先頭 or 最後から偶数を指定

evenと記述することで2, 4, 6, 8, 10 ...のように偶数を指定することができます。

例:先頭 or 最後から偶数を指定

先頭 or 最後から偶数を指定したイメージ

/* 先頭から... */
ul li:nth-child(even) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(even) {
  background-color: #e74c3c;
}

先頭 or 最後から奇数を指定

oddと記述することで1, 3, 5, 7, 9 ...のように奇数を指定することができます。

例:先頭 or 最後から奇数を指定

先頭 or 最後から奇数を指定したイメージ

/* 先頭から... */
ul li:nth-child(odd) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(odd) {
  background-color: #e74c3c;
}

 

小ネタ: evenとoddの覚え方

偶数を表す「even」と奇数を表す「odd」ですが、混乱してしまったり頻繁に間違ってしまうという人は「evenは4文字なので偶数指定、oddは3文字なので奇数指定」と考えると覚えやすいです。

先頭 or 最後からx番目以降を指定

:nth-child(n+x)または:nth-last-child(n+x)のように記述し、xの部分に数値を記述することで「先頭 or 最後からx番目以降に」という指定になります。

例:先頭 or 最後から3番目以降を指定

先頭 or 最後から3番目以降を指定したイメージ

/* 先頭から... */
ul li:nth-child(n+3) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(n+3) {
  background-color: #e74c3c;
}

先頭 or 最後からx番目まで(x番目以前)を指定

:nth-child(-n+x)または:nth-last-child(-n+x)のように記述し、xの部分に数値を記述することで「先頭 or 最後からx番目まで(x番目以前)に」という指定になります。

例:先頭 or 最後から3番目まで(3番目以前)を指定

先頭 or 最後から3番目まで(3番目以前)を指定したイメージ

/* 先頭から... */
ul li:nth-child(-n+3) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(-n+3) {
  background-color: #e74c3c;
}

先頭 or 最後から指定範囲を指定

先頭からの場合は:nth-child(n+x):nth-child(-n+x)を、最後からの場合は:nth-last-child(n+x):nth-last-child(-n+x)を組み合わせて記述することで、「先頭 or 最後から○番目~○番目までに」という感じで範囲指定することができます。

例:先頭から3番目~先頭から6番目までを指定 および 最後から3番目~最後から6番目までを指定を指定

先頭から3番目~先頭から6番目までを指定 および 最後から3番目~最後から6番目までを指定を指定したイメージ

/* 先頭から... */
ul li:nth-child(n+3):nth-child(-n+6) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(n+3):nth-last-child(-n+6) {
  background-color: #e74c3c;
}

いくつか紹介してきましたが、特に6、7、8で紹介した指定方法などは覚えておくと無駄なクラスを付けなくてすんだり、CSSも短い記述にすることができるので覚えておくと便利だと思います。