Question

Supposed We have the Html structure like below.

<table class="main-tb">
<tr>
<td>
</td>
<td id ="mytd">
</td>
</tr>
</table>

and the applied css file is defined below.

.main-tb 
{
    font-size: 13px; 
    line-height: 20px;
    padding: 5px 10px;

}
.main-tb th 
{
    background-color: #F8F8F8;
    border-color: #CCCCCC -moz-use-text-color;
    border-style: solid none;
    border-width: 1px 0;
    line-height: 22px;
    padding: 5px 10px;    
}

.main-tb td 
{
    border-color: #CCCCCC;
    border-style: dotted;
    border-width: 0 0 1px;/**/
    line-height: 22px;
    padding: 5px 10px;
}

We can see the .main-tb td style is applied to all the td elements in the table.
Now if i want to apply different style to one of the td elements named mytd, like removing the border-color and border-width from .main-tb td . So, what should i do ?Thanks.

Answer 1

#mytd is more specific than .main-tb td, so you just remove the border from #mytd.

#mytd {
    border: 0 none;
}