CSS классы и подклассы

Question

Возможно ли, кроме того, что я делаю, потому что это, похоже, не работает, сделать это? Я хочу иметь подклассы, которые находятся в классе, чтобы использовать CSS специально для этого класса. 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>

Так что я могу просто использовать class = "item" для элементов родительского css-класса "area1", "area2". Я знаю, что могу использовать class = "area1 item", чтобы заставить это работать, но я не понимаю, почему это должно быть настолько многословно. Не должен ли подкласс css посмотреть, в каком родительском классе он находится, чтобы определить его?

Примечание: это работает в IE (сейчас используется 7), но в FF - нет, поэтому я предполагаю, что это не стандартный способ CSS сделать что-то.

Answer 1

вы также можете иметь два класса внутри элемента, подобного этому

<div class = "item1 item2 item3"></div>

каждый элемент в классе является собственным классом

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}