Classes et sous-classes CSS

Question

Est-il possible de faire cela autrement que ce que je fais parce que cela ne semble pas fonctionner ? Je veux pouvoir faire en sorte que les sous-classes qui sont sous une classe utilisent le CSS spécifique à cette classe.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>

Ainsi, je peux simplement utiliser class="item" pour les éléments relevant de la classe css parente "area1", "area2". Je sais que je peux utiliser class="area1 item" pour que cela fonctionne, mais je ne comprends pas pourquoi il faut être si prolixe à ce sujet. La sous-classe css ne devrait-elle pas regarder sous quelle classe parente elle se trouve pour la définir ?

Remarque : cela fonctionne dans IE (j'utilise 7 en ce moment), mais pas dans FF, donc je suppose que ce n'est pas une façon standard de faire du CSS.

Answer 1

Il faut juste ajouter un espace :

.area2 .item
{
    ...
}

Answer 2

Pour info, lorsque vous définissez une règle comme vous l'avez fait ci-dessus, avec deux sélecteurs enchaînés :

.area1.item
{
    color:red;
}

Ça veut dire :

Appliquez ce style à tout élément qui possède à la fois la classe "area1" et "item".

Par exemple :

<div class="area1 item">

Malheureusement, cela ne fonctionne pas dans IE6, mais c'est ce que cela signifie.

Answer 3

Votre problème semble être un espace manquant entre vos deux classes dans le CSS :

.area1.item
{
    color:red;
}

Devrait être

.area1 .item
{
    color:red;
}

Answer 4

Voulez-vous obliger à ne sélectionner que les enfants ? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

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

Answer 5

Il suffit de mettre un espace entre .area1 et .item, par exemple :

.area1 .item
{
    color:red;
}

ce style s'applique aux éléments avec la classe item à l'intérieur d'un élément avec la classe area1.