CSS３で要素の場所を指定出来るnth-childの書き方をよく忘れるのでコピペで使えるようにまとめました。
互い違いに色を変えた表や一覧を作ったり、リストの最初の１件の前にmarginを入れたり、コーディング時によく使うのでもりもり使いこなして素敵なサイトを作ってくださいね！

基本のHTML

基本のHTMLはこちら。li要素に対してCSSを指定する想定です！

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

コピペしよう(基礎編)

最初のみ、最初の１つ

li:first-child () {
 ※反映したいCSS
}

li:nth-child(1) {
 ※反映したいCSS
}

最初の要素を指定するfirst-childと１番目の要素を指定するnth-child(1)どちらでもOKです。

最後のみ、最後の１つ

li:last-child {
 ※反映したいCSS
}

よく使います！何個続いてもプログラムで数が増えても減っても最後の要素を指定してくれます。
便利！

奇数

li:nth=child(odd) {
 ※反映したいCSS
}

li:nth-child(2n-1) {
 ※反映したいCSS
}

一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表すnth=child(odd)とリスト中の位置が、 An+B で定義された数値のパターンと一致する要素を表すnth=child(2n-1)があります。

偶数

li:nth=child(even) {
 ※反映したいCSS
}

li:nth-child(2n) {
 ※反映したいCSS
}

一連の兄弟要素の中で奇数番目の要素 (2, 4, 5, など) を表すnth=child(even)とリスト中の位置が、 An で定義された数値のパターンと一致する要素を表すnth=child(2n)があります。

最初から３番目まで（３番目以前）

li:nth-child(-n+3) {
 ※反映したいCSS
}

タグ内の３の数字を変更すると４番目、５番目…と自由に調整できます。

最後から３番目まで（３番目以降）

li:nth-child(n+3) {
 ※反映したいCSS
}

こちらもタグ内の３の数字を変更すると４番目、５番目…と自由に調整できます。

コピペしよう(応用編)

３の倍数

li:nth-child(3n){
 ※反映したいCSS
}

3,6,9,12…と３の倍数の時にスタイルを反映してくれます。
数字を変えたら４の倍数、５の倍数…といろいろできます。

横並びの３つあるBOXで折返しを指定したり、marginを指定したり使えそうです。

２個目以降３の倍数

li:nth-child(3n+2){
 ※反映したいCSS
}

+2で何個目以降かを指定し3nで３の倍数を指定しています。

途中を指定(3個目以降７番目以前)

li:nth-child(n+3):nth-child(-n+7){
 ※反映したいCSS
}

何個目から何個目までを自由に指定できます。

3番目以外を指定

li:not(:nth-child(3)) { 
 ※反映したいCSS
}

指定した順番の要素以外を指定します。

まとめ

以上、コピペ用のnth-childタグまとめでした！
まとまっているところが少なかったのでまとめました。

コピペがはかどるわぁ〜