css - nth-Child repeat in a loop

Question

Folks,

i have 100 < p> tags and i'm trying to repeat a set of four color to every row in a bellow manner.

RED BLUE GREEN PURPLE RED BLUE GREEN PURPLE ....and so on

The output generated is not as i desired. The output is

RED BLUE GREEN PURPLE RED GREEN RED PURPLE GREEN BLUE RED PURPLE

so if you have any suggestion that would be helpful for me, :)

here is my css code.

<style>    
p:nth-child(1n) {
        background: red;
    }
    p:nth-child(2n) {
        background: blue;
    }
    p:nth-child(3n) {
        background: green;
    }
    p:nth-child(4n) {
        background: purple;
    }
</style>

Answer 1

The following CSS will give you the solution you require.

<style>    
p:nth-child(4n+1) {
        background: red;
    }
    p:nth-child(4n+2) {
        background: blue;
    }
    p:nth-child(4n+3) {
        background: green;
    }
    p:nth-child(4n+4) {
        background: purple;
    }
</style>

Simple working example at fiddle http://jsfiddle.net/yugi47/Nwf2A/59/