Issue with table td class overriding..

[quadrant6]

I'm trying to apply a class to a td to have it's contents right-aligned:

<table class="basic_form">
  <tr>
   <td class="right">blah</td>
 </tr>
</table>

However, it doesn't seem to be taking effect and the only conclusion I can draw is that the table class 'basic_form' is overriding it? (even though it comes before the 'right' class in my .css?

CSS:

/* TABLES */
.basic_form{
	margin: 0 0 25px 0; 
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #424242; 
}
.basic_form td, .basic_form th{
	padding: 0 10px 18px 0;
	vertical-align:top;
	text-align: left;
}


/* CLASSES */
.right{
	text-align: right;
}


/* the following works but I don't think I should need to? */
td.right, th.right{
	text-align: right;
}

Can anyone shed some light on why this is occuring?

[BonRouge]

I think '.basic_form td' is more specific than '.right'. Your solution is a good one - it makes it more specific. Another way would be to use '.basic_form .right'.

[Kravvitz]

http://www.w3.org/TR/CSS21/cascade.html#specificity

[quadrant6]

Yep, .basic_form td is more specific.

Cheers guys.