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().
Range targeting is especially useful for featured windows in lists, like highlighting items 4 to 7 in a feed. The pattern is easy to adjust: change the first selector start index and the second selector end index.
If your list mixes different element types, prefer :nth-of-type() to avoid surprises when non-matching nodes are inserted. It keeps the range predictable as content evolves.
This range pattern is great for featured windows in lists, timelines, or product grids. You can move the highlighted segment by changing only two numbers, which keeps HTML clean and avoids class-heavy markup.
Range targeting with :nth-child() helps highlight windows of items without adding classes. It is useful in timelines, ranked lists, and featured groups where boundaries change over time.
On form-heavy pages, this is most effective when you keep semantics native and style enhancements lightweight. That balance preserves accessibility and reduces maintenance cost.
Want to build modern interfaces with less JavaScript?
I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.
Learn more