CSS - styling every nth column in a table

user_1376843 0
Viewed 389

I've got a table where every two cells are corelated and I want to differentiate them with a bg color.

Every 3rd and 4th child won't work I need it to be every 2nd set of 2 columns.

td:nth-child(3n), td:nth-child(4n){
    background-color:#ddd;
}
<table>
<tr>
<td>1a</td><td>1b</td>
<td>2a</td><td>2b</td>
<td>3a</td><td>3b</td>
<td>4a</td><td>4b</td>
</tr>
</table>

css html
1 Answers

How about the following; target every 4th <td> and the <td> before (-1) every 4th element:

td:nth-child(4n), td:nth-child(4n-1){
    background-color:#ddd;
}
<table>
<tr>
<td>1a</td><td>1b</td>
<td>2a</td><td>2b</td>
<td>3a</td><td>3b</td>
<td>4a</td><td>4b</td>
</tr>
</table>

user_16121460
Related