CSS Classes & SubClasses

Question

Is it possible, other than what I'm doing because it doesn't seem to work, to do this? I want to be able to have subclasses that are under a class to use the CSS specifically for that class.subclass.

CSS

.area1 {     border:1px solid black; } .area1.item {     color:red; } .area2 {     border:1px solid blue; } .area2.item {     color:blue; } 

HTML

<div class="area1">     <table>         <tr>             <td class="item">Text Text Text</td>             <td class="item">Text Text Text</td>         </tr>     </table> </div> <div class="area2">      <table>         <tr>             <td class="item">Text Text Text</td>             <td class="item">Text Text Text</td>         </tr>     </table> </div> 

So that I can just use class="item" for the elements under the parent css class "area1","area2". I know I can use class="area1 item" to get this to work, but I don't understand why it has to be so verbose about it. Shouldn't the css subclass look at what parent class it is under in order to define it?

Note: this works in IE (using 7 right now), but in FF it does not, so I'm assuming this isn't a CSS standard way of doing something.

Answer 1

Just need to add a space:

.area2 .item {     ... } 

Answer 2

FYI, when you define a rule like you did above, with two selectors chained together:

.area1.item {     color:red; } 

It means:

Apply this style to any element that has both the class "area1" and "item".

Such as:

<div class="area1 item"> 

Sadly it doesn't work in IE6, but that's what it means.