Unlock the power of :nth-child() to target elements
But did you know you can use it to select an entire range of elements?
Instead of styling every third item or just the odd/even ones, you can define a precise segment.
This works by combining two :nth-child() selectors:
nth-child(n+4): Selects everything from the 3rd item onward.nth-child(-n+7): Selects everything up to the 7th item.
Together, they create a flexible way to target only a specific range.
This trick is perfect for highlighting content or dynamically styling sections of a list.
Next time you need to style a group of elements, without adding extra classes, think about :nth-child().
To learn more tips about CSS, make sure to join my newsletter below ❤️
