CSS is odd even with 2 cols

Question

My html looks like this:

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

and there are 2 articles on the same line as the float, and I want them to change color as follows:

  blue green
 green blue
 blue green
 green blue

how can i do this with css?

Answer 1

There are four article in the template, so some 4n offset should do the trick. This seems to work ( Fiddle ):

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

If you don't like minus, plus also works the same way ( Fiddle ):

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

---

Just to explain all the logic, this is a matter of switching the 4n template:

  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 and +3 are congruent to mod 4, like -2 and +2 , so they relate to the same elements (although the value of n technically different for each).

You can even change it and the color 4n and 4n+1 blue ( Fiddle ):

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