CSS3: How to select every 4th and 5th element

Question

I'm new to these selectors and I was wondering how I would go about doing such a thing.

My selector needs to select the 4th and 5th elements, but then it needs to keep doing so. So it'd need to select 4, 5, 9, 10, 14, 15 and so on.

How is this possible? At the moment I can select every third item like so:

.pure-g-r .pure-u-1-3:nth-child(3n+3)

But I'm not sure how I can translate that into what I need.

Thanks for any help.

Answer 1

You actually want to select every couple from the 4th and 5th element, with jumps of 5.

So, just use the following two comma-separated selectors.

.pure-g-r .pure-u-1-3:nth-child(5n + 4), .pure-g-r .pure-u-1-3:nth-child(5n)

jsFiddle Demo

Answer 2

a little nth-child tester page: http://css-tricks.com/examples/nth-child-tester/

.pure-u-1-3:nth-child(5n + 4), .pure-u-1-3:nth-child(5n){
    color:red;
}

http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/how-nth-child-works/