CSS3 :nth-child() Selector: Quick Visual Guide
The :nth-child() pseudo-class lets you target elements based on their position among siblings.
Here's what each pattern selects (yellow = matched):
🔹first-child → 1st child only
🔹last-child → Last child only
🔹nth-child(2) → Exactly the 2nd child
🔹nth-last-child(2) → 2nd from the end
🔹nth-child(odd) → 1, 3, 5, 7… (odd positions)
🔹nth-child(even) → 2, 4, 6, 8… (even positions)
🔹nth-child(n+4) → From 4th onward (4, 5, 6…)
🔹nth-child(3n+1) → 1, 4, 7, 10… (every 3rd, starting at 1)
🔹nth-child(3n-1) → 2, 5, 8, 11… (every 3rd, offset by -1)
🔹nth-child(4n) → 4, 8, 12… (every 4th child)
✅ Pro tip:n starts at 0. so 3n+1 hits 1st, 4th, 7th…
The :nth-child() pseudo-class lets you target elements based on their position among siblings.
Here's what each pattern selects (yellow = matched):
🔹first-child → 1st child only
🔹last-child → Last child only
🔹nth-child(2) → Exactly the 2nd child
🔹nth-last-child(2) → 2nd from the end
🔹nth-child(odd) → 1, 3, 5, 7… (odd positions)
🔹nth-child(even) → 2, 4, 6, 8… (even positions)
🔹nth-child(n+4) → From 4th onward (4, 5, 6…)
🔹nth-child(3n+1) → 1, 4, 7, 10… (every 3rd, starting at 1)
🔹nth-child(3n-1) → 2, 5, 8, 11… (every 3rd, offset by -1)
🔹nth-child(4n) → 4, 8, 12… (every 4th child)
✅ Pro tip:
❤3