Creating an advanced CSS nth-child selector

Question

I have a bunch of tiles that look like this:

The way I'm currently targeting the blue ones is like this:

#recent ul li:nth-child(3),
#recent ul li:nth-child(4),
#recent ul li:nth-child(9) {
    width: 49.79166666666667%;
    margin: 0 0 0 0.41666666666667%;
}

Is there a way in CSS to make a selector that takes that pattern into account, for if I wanted to add 60 tiles? So that I don't have to keep specifying exact values? I know how to select every 2nd, or third etc, but not something where the pattern changes.

Thanks for any assistance

Answer 1

From your diagram, it looks like in every set of 6 li items, you want to target the 3rd and 4th....try this:

#recent ul li:nth-child(6n+3),
#recent ul li:nth-child(6n+4)

dev.mozilla link

jsfiddle example