親要素内での順序に基づいて要素を選択できる擬似クラスです。リストやグリッドの偶数・奇数行、特定のパターンにスタイルを適用する際に便利です。
:nth-child(n) { ... }li:nth-child(2n) {
background: #f3f4f6;
}偶数番目のリストアイテムに背景色を付ける
.grid-item:nth-child(3n+1) {
border-left: 2px solid #3b82f6;
}3の倍数+1番目のグリッドアイテムに左枠線を付ける
nは0から始まる整数。even/oddや数式も使える。
0番目は存在しないので注意。nth-of-typeとの違いも理解しよう。
IE9+, 全モダンブラウザ