How to select the 3rd through 5th element out of 10

nth-child ranges can be tricky so, let's break it down into 3 simple steps and use a graphical example.

We start out with:

Step 1: Count forward from 3

• That's n+3
• the n tells us to count every element going forward
• the +3 tells us to start counting at 3

So the CSS is:

nth-child(n+3){ background: indianred; }

Which will give us:

Step 2: Count backward from 5

• That's -n+5
• the -n tells us to count every element going backward, the minus is for backward
• the +5 tell us to start counting at 5

So the CSS is:

nth-child(n-5)

Which will give us:

Step 3: Combine the 2 steps and CSS does it's magic

Combine the 2 nth-childs into a single selector using the : combinator

nth-child(n+3):nth-child(-n+5)

We end up with:

So the take away from all of this is that it doesn't matter the number of elements you have, you just need to combine the 2 nth-childs together

I made you a little nth-child playground go nuts.

http://codepen.io/jamesbarnett/pen/tlBfp