Using nth-child to select an even, and then an odd number of elements

Question

I'm attempting to style list items in this particular order:

1: White
2: White
3: Blue
4: Blue
5: Blue
6: White
7: White
8: Blue
9: Blue
10: Blue
11: White
12: White

The pattern is [1-2] [3-4-5] [6-7] [8-9-10]

My html structure is just a simple list:

<ul>     <li></li>     <li></li>     <li></li>     <li></li>     <li></li> </ul>     

Is this pattern possible using css nth-child? If so what would my selector look like?

Answer 1

Try:

ul li:nth-child(5n), ul li:nth-child(5n-1), ul li:nth-child(5n-2) { color:rgb(0,0,255); }  ul li:nth-child(5n-3), ul li:nth-child(5n-4) { color:rgb(255,255,255); }