リストスタイルのまとめ

■最初のみ
li:first-child

■最後のみ
li:last-child

■リストが1つだけの時に適応
li:only-child

■交互に変更
li:nth-child(2n) { /* 偶数番目(2,4,6……番目) */
color: red;
}
li:nth-child(2n+1) { /* 奇数番目(1,3,5……番目) */
color: green;
}

■特定のリストを変更
li:nth-child(2){
color: green;
}

■3つずつ変更
li:nth-child(3n) { /* 3の倍数(3,6,9……) */
color: red;
padding-bottom: 0.5em;
}
li:nth-child(3n+1) { /* 3の倍数+1 (1,4,7……) */
color: blue;
}
li:nth-child(3n+2) { /* 3の倍数+2 (2,5,8……) */
color: green;
}

上記が使えない時には・・・
例）li:nth-child(3n)　と同じ動作
ul > *:first-child + * + * {

background-color: yellow;

}

■4つずつ変更
li:nth-child(4n) { /* 4の倍数(4,8,12……) */
padding-bottom: 0.5em;
color: red;
}
li:nth-child(4n+1) { /* 4の倍数+1 (1,5,9,13……) */
color: blue;
}
li:nth-child(4n+2) { /* 4の倍数+2 (2,6,10,14……) */
color: green;
}
li:nth-child(4n+3) { /* 4の倍数+3 (3,7,11,15……) */
color: #cccc00;
}

■最初の3つとそれ移行で分ける
li:nth-child(-n+3) { /* 先頭から3つのみ */
color: red;
}
li:nth-child(n+4) { /* 4番目以降のみ */
font-size: smaller;
}

■最後の3つとそれ以前でわける
li:nth-last-child(-n+3) { /* 最後から3つのみ */
color: red;
}
li:nth-last-child(n+4) { /* 最後から4つ目以前 */
color: gray;
font-size: smaller;
}

■最初と最後のみ変更
li:nth-child(1) { /* 1番目のみ */
color: red;
}
li:nth-last-child(1) { /* 末尾から1番目のみ */
color: blue;
}

参考サイト

All About（オールアバウト）

CSS3で偶数行・奇数行など「n番目」を限定装飾する

https://allabout.co.jp/gm/gc/383707/2/