change style of table's specific columns - css

Question

As you can see, I have two tables each inside two divisions . Here is jsFiddle example ! What I want to do is to change the background color of firstDiv's table first column and third column , secondDiv's table second column and fourth column , By CSS only :)
<div id="firstDiv" style="float:left;margin-right:12px;">
<table width="200" border="1" cellpadding="8">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="secondDiv">
<table width="200" border="1" cellpadding="8">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>

Answer 1

You are looking at typical usage of nth-child with even/odd selector.
Following should do the trick.
#firstDiv td:nth-child(odd)
{
background-color:#cecece;
}
#secondDiv td:nth-child(even)
{
background-color:#cecece;
}
Fiddle
Another variation:-
#firstDiv td:nth-child(2n+1)
{
background-color:#cecece;
}
#secondDiv td:nth-child(2n+2)
{
background-color:#cecece;
}
If you want to specifically select 1st and 3 alone then you can use
#firstDiv td:nth-child(1),
#firstDiv td:nth-child(3) {
background-color:#cecece;
}
#secondDiv td:nth-child(2),
#secondDiv td:nth-child(4) {
background-color:#cecece;
}
See for support

Answer 2

Use :nth-child pseudo-selector. See the fiddle

Answer 3

Edited:
You can achive it by using nth-child also but all browser does not support nth-child
But the following approach is supported in all browsers..
CSS:
#firstDiv td,
#firstDiv td + td + td{
background-color:#cecece;
}
#firstDiv td + td,
#firstDiv td + td + td + td{
background-color:#fff;
}
#secondDiv td + td,
#secondDiv td + td + td + td{
background-color:#cecece;
}
#secondDiv td,
#secondDiv td + td + td{
background-color:#fff;
}
SEE DEMO

Answer 4

You will need to apply your CSS class to a relevant cell (e.g. 1st TD) of every row in the table. This way an impression will be given that entire column is of a different color. When setup like this if you change background color in CSS class definition - the change will affect all cells in the column at once.