Combine CSS selectors with class not working

Question

I think I know the rules how to combine CSS selectors.

But it isn't working.

I have this CSS:

table,td
{
    border               : 1px solid #CCC;
    border-collapse      : collapse;
  font                 : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}

table
{
    border                :none;
    border                :1px solid #CCC;
}
thead th,
tbody th
{
    background            : #fafafb;
  color                 : #666;  
    padding               : 5px 10px;
  border-left           : 1px solid #CCC;
  border-bottom            : 1px solid #CCC;
}
tbody th
{
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : left;
  font-weight           : normal;
}

#middletable {
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : center;
  font-weight           : normal;
}
tbody tr td
{
    padding               : 5px 10px;
  color                 : #666;
}

I want to specify it, so this rules are only working in one class.

So I put the class "greytable" to my table tag

<table class="greytable"></table>

After that I tried to put the selector to my CSS like this:

table.greytable, .greytable td
{
    border               : 1px solid #CCC;
    border-collapse      : collapse;
  font                 : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}

table.greytable
{
    border                :none;
    border                :1px solid #CCC;
}
.greytable thead th,
.greytable tbody th
{
    background            : #fafafb;
  color                 : #666;  
    padding               : 5px 10px;
  border-left           : 1px solid #CCC;
  border-bottom            : 1px solid #CCC;
}
.greytable tbody th
{
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : left;
  font-weight           : normal;
}

#middletable {
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : center;
  font-weight           : normal;
}
.greytable tbody tr td
{
    padding               : 5px 10px;
  color                 : #666;
}

But it isn't working. Can anybody show me what did I do wrong and how it will work?

Here is the fiddle: http://jsfiddle.net/HYabQ/

Answer 1

Ok, this is pretty basic stuff. But I have created an example for you.

In this simple demo we have 2 tables, we only want to style the first one. We give it a class or id and using that give the table styles. Its the same as anything else really, as the table has the class test we don't need to try and get the table again e.g: .test table as we are already selecting it.

From this the first table with the class test will be styled, whereas the second will not be touched due to it not having class test.

Have a look at the fiddle and play around with it, hope this helps.

HTML:

Only this one will be affected
<table class="test">
    <tr>
        <th>Test</th>
        <th>Test</th>
        <th>Test</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

This table will not
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS:

.test th {
    width: 100px;
    border: 1px solid;
    font-size: 10px;
}
.test td {
    border: 1px solid;
    height: 100px;
}

DEMO HERE