Classes et sous-classes CSS

102

Est-il possible, à part ce que je fais parce que ça ne marche pas, de faire ça? Je veux pouvoir avoir des sous-classes qui sont sous une classe pour utiliser le CSS spécifiquement pour cette classe.

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>

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

Remarque: cela fonctionne dans IE (en utilisant 7 pour le moment), mais pas dans FF, donc je suppose que ce n'est pas une manière standard CSS de faire quelque chose.

css

— Ryan Abbott
source

183

Juste besoin d'ajouter un espace:

.area2 .item
{
    ...
}

— Chad Birch
source

Je n'utilise pas vraiment de sous-classes moi-même ...... quelqu'un peut-il me donner une raison pour laquelle cela serait nécessaire?

— patricksweeney

2

Les sous-classes ne sont qu'un moyen supplémentaire d'ajouter une spécificité supplémentaire à vos règles CSS, le cas échéant. Vous pouvez avoir une classe principale, mais vous pouvez modifier la règle d'un élément en fonction de son emplacement dans le document.

— Matt Howell

74

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 a à la fois la classe «area1» et «item».

Tel que:

<div class="area1 item">

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

— Matt Howell
source

1

C'était en fait la chose que je recherchais, merci de l'expliquer!

— F-3000

Je sais que c'est ancien, mais voulez-vous dire "area1" ou "item" au lieu de "area1" et "item"? Cela fait une différence significative.

— Mgamerz

merci beaucoup pour cela, je me creusais la tête pour comprendre cela.

— user3547774

26

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;
}

— Perroquets
source

14

voulez-vous forcer uniquement les enfants à être sélectionnés? 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;
}

— MrChrister
source

1

Pas ce à quoi je pensais, mais c'est une bonne information si je ne veux que des enfants directs. Merci!

— Ryan Abbott

Je ne savais pas pour celui-là. Merci pour cela MrChrister

— Sebastian Sastre

10

Mettez simplement un espace entre .area1 et .item, par exemple:

.area1 .item
{
    color:red;
}

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

— M4N
source

8

Mettez juste un espace entre vos cours

.area1 .item
{
    ...
}

Voici une très bonne référence pour les sélecteurs CSS .

— mbillard
source

6

Suite à la réponse de kR105 ci-dessus:

Mon problème était similaire à celui de l'OP (affiche originale), ne se produisait qu'en dehors d'une table, donc les sous-classes n'étaient pas appelées à partir de la portée de la classe parente (la table), mais en dehors de celle-ci, j'ai donc dû ajouter des sélecteurs , comme mentionné kR105.

Voici le problème: j'avais deux boîtes (divs), chacune avec le même rayon de bordure (HTML5), padding et marge, mais j'avais besoin de leur donner des couleurs différentes. Plutôt que de répéter ces 3 paramètres pour chaque classe de couleur, je voulais qu'une "superclasse" contienne border-radius / padding / margin, puis juste des "sous-classes" individuelles pour exprimer leurs différences (guillemets doubles autour de chacune car ce ne sont pas vraiment des sous-classes - voir mon post plus tard). Voici comment cela a fonctionné:

HTML:

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

CSS:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

J'espère que quelqu'un trouvera cela utile.

— maximus
source

3

C'est la colonne vertébrale du CSS, la "cascade" des feuilles de style en cascade.

Si vous écrivez vos règles CSS sur une seule ligne, il est plus facile de voir la structure:

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

L'utilisation de plusieurs classes est également une bonne utilisation intermédiaire / avancée de CSS, malheureusement il existe un bogue IE6 bien connu qui limite cette utilisation lors de l'écriture de code cross browser:

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 IGNORE le premier sélecteur dans une règle multi-classes, donc IE6 applique réellement la règle .area1.larger comme

/*.area1*/.larger { ... }

Cela signifie qu'il affectera TOUS les éléments .larger.

C'est un bogue très méchant et malheureux (l'un des nombreux) dans IE6 qui vous oblige à ne jamais utiliser cette fonctionnalité de CSS si vous voulez un fichier CSS propre à tous les navigateurs.

La solution consiste alors à utiliser des préfixes de nom de classe CSS pour éviter toute collision avec des noms de classe génériques:

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

Vous pouvez également utiliser une seule classe, mais de cette façon, vous pouvez conserver le CSS dans la logique souhaitée, tout en sachant que .area1Larger n'affecte que .area1, etc.

1

La classe que vous appliquez sur le div peut être utilisée comme point de référence pour styliser des éléments avec ce div, par exemple.

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


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

Pour être super sémantique, vous devez déplacer la classe sur la table.

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

— George Wiscombe
source

1

vous pouvez également avoir deux classes dans un élément comme celui-ci

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

chaque élément de la classe est sa propre classe

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
source

1

kR105 a écrit:

vous pouvez également avoir deux classes dans un élément comme celui-ci

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

Je ne vois pas la valeur de cela, puisque par le principe des styles en cascade, le dernier a la priorité. Par exemple, si dans mon exemple précédent j'ai changé le HTML pour lire

 <div class="box1 box2"> Hello what is my color? </div>

la bordure et le texte de la boîte seraient bleus, car le style de .box2 attribue ces valeurs.

Également dans mon article précédent, j'aurais dû souligner que l' ajout de sélecteurs comme je l'ai fait n'est pas la même chose que la création d'une sous - classe dans une classe (la première solution de ce fil), bien que l'effet soit similaire.

— maximus
source