使用nth-child改变图案的背景颜色

Question

I am trying to create a grid where the background colors alternate using the nth-child selector.

I have a grid with three columns and the pattern is 4 colors: blue, orange, green, purple.

So my pattern is supposed to go like this:

o | b | g
p | o | b
g | p | o

The thing is, I can't figure out what formula to use in order to acchieve this affect. Here's my code as it is now:

.mask { /*orange*/
    background-color: rgba(235,167,32, 0.7);
}

.view:nth-child(2n+2) .mask { /*blue*/
    background-color: rgba(4,141,195, 0.7);
}

.view:nth-child(3n+3) .mask { /*green*/
    background-color: rgba(0,211,130, 0.7);
}

.view:nth-child(4n+4) .mask { /*purple*/
    background-color: rgba(185,40,141, 0.7);
}

This is the wrong pattern that results:

b | g | p
o | g | o
p | g | b

If anybody could offer some guidance here, I'd greatly appreciate it!

Answer 1

JSFIDDLE DEMO

 .view:nth-child(4n+2) .mask 
   { /*orange*/
     background-color: orange;
   }

   .view:nth-child(4n+3) .mask 
   { /*blue*/
      background-color: blue;
   }

  .view:nth-child(4n+4) .mask 
  { /*green*/
    background-color: green;
  }

  .view:nth-child(4n+5) .mask 
  { /*purple*/
    background-color: purple;
  }

Explanation

 I don't see your HTML. I assumed totally 9 divs. 
 First one is Orange and then blue, green, purple .
 It repeats for one more cycle. Ends with one orange.