zey zey - 5 days ago 6
ASP.NET (C#) Question

change style of table's specific columns

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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="secondDiv">
<table width="200" border="1" cellpadding="8">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>

PSL PSL
Answer

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