[outhowz42]

I have CSS for a table, and when I create a table in HTML I want to do something like this:

<table class="special">
</table>

I would like for all th, td, tbody, caption, etc use the properties defined in the special class. In order for that to happen, I have to do <tr class="special">, or <td class="special">, for every single element? Why cant I just assign the class to the table and be done with it?

Here is the CSS. I was doing table.special, th.special, td.special, caption.special, etc... is there a way to avoid this, by doing something like table.special, then doing table.special:th, table.special:td, or something like that? I'm confused. Thanks.

<style type="text/css">
 
table, th, td {
    border: 1px solid #D4E0EE;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}
 
caption {
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
}
 
td, th {
    padding: 4px;
}
 
thead th {
    text-align: center;
    background: #E6EDF5;
    color: #4F76A3;
    font-size: 100% !important;
}
 
tbody th {
    font-weight: bold;
    font-size: 10px;
}
 
tbody tr { background: #FCFDFE; }
 
tbody tr.odd { background: #F7F9FC; }
 
table a:link {
    color: #718ABE;
    text-decoration: none;
}
 
table a:visited {
    color: #718ABE;
    text-decoration: none;
}
 
table a:hover {
    color: #718ABE;
    text-decoration: underline !important;
}
 
tfoot th, tfoot td {
    background: #E6EDF5;
    font-size: 10px;
} 

[omniman]

You can start with your class name, and then utilize inheritance for the objects. That way, you are saying: look at an element with class 'special' and take any table, th, td, etc. elements within that class.

An example would be:

.special table, 
.special th, 
.special td {
    border: 1px solid #D4E0EE;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}
 
.special caption {
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
}
 
.special td, 
.special th {
    padding: 4px;
}