The `:nth-child` pseudo-class is a powerful CSS selector for styling elements based on their position in a list, like adding alternating colors to table rows ('zebra striping'). However, the formulaic syntax (`An+B`) can be confusing. Our tester provides a visual way to experiment. Enter any `:nth-child` formula and see which elements in a sample list are highlighted. It's a great way to learn, debug, and perfect your selectors for styling lists, grids, and tables.
🎯:nth-child Tester
Frequently Asked Questions
What does `2n+1` mean?
`2n+1` is a formula that selects odd-numbered elements. 'n' starts at 0 and counts up. So it selects the 1st (2*0+1), 3rd (2*1+1), 5th (2*2+1), and so on. You can also just use the keyword `odd`.
What is the difference between `:nth-child` and `:nth-of-type`?
`:nth-child(n)` selects an element that is the nth child of its parent, regardless of its type. `:nth-of-type(n)` selects an element that is the nth child of its type. This tester uses `:nth-child`, but the formulas work the same for both.
