html - CSS odd even with 2 cols -

my html this:

<article></article> <article></article> <article></article> <article></article> <article></article> <article></article> 

and there 2 articles in 1 line float , want them change color like:

 blue green green blue blue green green blue 

how can css?

there 4 articles in pattern, offset of 4n ought trick. seems work (fiddle):

article {color:blue} article:nth-child(4n-1), article:nth-child(4n-2) {color:green} 

if don't minus, plus works same (fiddle):

article {color:blue} article:nth-child(4n+2), article:nth-child(4n+3) {color:green} 

---

just explain entire logic, it's matter of shifting 4n pattern:

                    4n-3    4n-2    4n-1 #   color   4n     4n+1    4n+2    4n+3 -- ------  -----  ------  ------  ------  1  blue    -       0        -        -  2  green   -       -        0        -  3  green   -       -        -        0  4  blue    1       -        -        -  5  blue    -       1        -        -  6  green   -       -        1        -  7  green   -       -        -        1  8  blue    2       -        -        -  9  blue    -       2        -        - 10  green   -       -        2        - 11  green   -       -        -        2 12  blue    3       -        -        - 13  blue    -       3        -        - 

-1 , +3 congruent mod 4, -2 , +2, these refer same elements (although value of n technically different each).

you swap around , color 4n , 4n+1 blue (fiddle):

article {color:green} article:nth-child(4n), article:nth-child(4n+1) {color:blue}