Select a range of elements without classes

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 ❤️

    No strings attached, unsubscribe anytime!