CSS specific table

Question

I have an HTML document where I have two different tables. One is class Alpha and one is class Beta. I want to assign this css to class Beta only...

td { border-style:solid; border-top:thick double #ff0000; } 

I can not figure out how to assign this only to Beta. Does anyone know how?

Answer 1

Just apply the .beta class selector to the entire table and change your CSS code to apply a rule only to td decedents of .beta like this:

<table class="beta">     <tr>         <td>...</td>         <td>...</td>     </tr> </table> 

.beta td {     border-style:solid;     border-top:thick double #ff0000; } 

If you need to apply the rule to multiple elements within .beta simply add an additional selector like this:

.beta td,  .beta th {     border-style:solid;     border-top:thick double #ff0000; } 

Qapla'!

Answer 2

CSS lets you get specific with what elements rules are to be applied to. Just add this rule to the table.Beta td cell declaration and you're done.

table.Beta td  {     border-style:solid;     border-top:thick double #ff0000; }