I have an HTML table and would like to change the row color every two rows, for two rows at a time. I don't mean selecting every other row using nth-child(even), which is all I keep seeing in my search engine results. I'm trying to set the background color of rows 1 and 2, then 5 and 6, then 9 and 10...and so on, leaving the other rows with the default white background.

I've tried using :nth-child(2n+b) and I don't think it's possible using that pseudo-selector. The tables are dynamically generated and will fluctuate in row count, so hard coding is not an option.

Is there some sort of JavaScript way to do this?

I have an HTML table and would like to change the row color every two rows, for two rows at a time. I don't mean selecting every other row using nth-child(even), which is all I keep seeing in my search engine results. I'm trying to set the background color of rows 1 and 2, then 5 and 6, then 9 and 10...and so on, leaving the other rows with the default white background.

I've tried using :nth-child(2n+b) and I don't think it's possible using that pseudo-selector. The tables are dynamically generated and will fluctuate in row count, so hard coding is not an option.

Is there some sort of JavaScript way to do this?

• javascript
• css
• css-selectors

Share Improve this question Follow edited May 27, 2014 at 21:16 lonesomeday 238k5353 gold badges327327 silver badges328328 bronze badges asked May 27, 2014 at 21:01 abahlerabahler 9911 silver badge1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It's definitely possible using CSS's :nth-child() notation:

tr:nth-child(4n + 1) td,
tr:nth-child(4n + 2) td {
    background-color: #ffa;
}

tr:nth-child(4n + 3) td,
tr:nth-child(4n + 4) td {
    background-color: #f90;
}

JS Fiddle demo.

This is the solution for your problem in php. Hope you can convert it into your required javascript.

$n = "#666";

$c = 0;

$p = 0;

while($c < 9){

if($p%2 == 0){

$n = ($n == "#666")?"#FFF":"#666";

$p=0;

}

$c++;

}