Creating multi background colors <tr> with CSS

Question

I'm working on a table for which I need more than just two background color for the "tr". What I'm using right now is :

.forum_table tr:nth-child(odd) { 
background-color:#f6f6f6; 
}

.forum_table  tr:nth-child(even) { 
background-color:#ffffff; 
}

But I need up to 5 different background colors for the same table. Is there any way to do that with CSS or do I need to do that with PHP which I'm not very good in?

Answer 1

You can do something like

Demo

table tr:nth-of-type(5n+1) {
    background: #f00;
}

table tr:nth-of-type(5n+2) {
    background: #0f0;
}

table tr:nth-of-type(5n+3) {
    background: #5d54fd;
}

table tr:nth-of-type(5n+4) {
    background: #564844;
}

table tr:nth-of-type(5n+5) {
    background: #00f;
}

Explanation: using (int)n will select every + nth tr element, this way you can select n number of color combinations, and not just odd and even

Answer 2

:nth-child(kn) [where kis an integer number] selector is your hero:

.forum_table  tr:nth-child(n){ ... }
.forum_table  tr:nth-child(2n){ ... }
.forum_table  tr:nth-child(3n){ ... }
...
.forum_table  tr:nth-child(kn){ ... }