Que signifient les virgules et les espaces dans plusieurs classes en CSS ?

Question

Voici un exemple que je ne comprends pas :

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Il me semble que width: 460px s'applique à toutes les classes susmentionnées. Mais pourquoi certaines classes sont-elles séparées par une virgule ( , ), et d'autres par un simple espace ?

Je suppose que width: 460px ne sera appliquée qu'aux éléments qui combinent des classes de la manière mentionnée dans le fichier CSS. Par exemple, il sera appliqué à <div class='container_12 grid_6'> mais il ne sera pas appliqué à la <div class='container_12'> . Cette hypothèse est-elle correcte ?

Answer 1

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Cela signifie que "tous les .grid_6 à l'intérieur des .container_12 et tous les .grid_8 à l'intérieur des .container_16 doivent avoir une largeur de 460 pixels". Le rendu sera donc le même dans les deux cas :

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

En ce qui concerne les virgules, il s'agit d'appliquer une règle à plusieurs classes, comme ceci.

.blueCheese, .blueBike {
  color:blue;
}

C'est l'équivalent fonctionnel de :

.blueCheese { color:blue }
.blueBike { color:blue }

Mais il réduit la verbosité.

Answer 2

.container_12 .grid_6 { ... }

Cette règle s'applique à un nœud DOM de classe container_12 qui a un descendant (pas nécessairement un enfant) avec la classe grid_6 et applique les règles CSS à l'élément DOM avec la classe grid_6 .

.container_12 > .grid_6 { ... }

Mise en place > entre eux dit que le grid_6 doit être un enfant direct du nœud de classe container_12 .

.container_12, .grid_6 { ... }

La virgule, comme d'autres l'ont indiqué, est un moyen d'appliquer des règles à plusieurs nœuds différents en même temps. Dans ce cas, les règles s'appliquent à tout nœud ayant une classe de container_12 o grid_6 .

Answer 3

Ce n'est pas exactement ce qui a été demandé, mais cela peut peut-être aider.

Pour appliquer un style à un élément uniquement s'il possède les deux classes, votre sélecteur ne doit pas utiliser d'espace entre les noms des classes.

Par exemple :

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>

Answer 4

Virgule regroupe les classes (applique le même style à toutes les classes), un espace vide indique que le sélecteur suivant doit se trouver à l'intérieur du premier sélecteur.

C'est pourquoi

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

applique ce style à la seule classe .grid_6 qui se trouve à l'intérieur .container_12 et à la classe .grid_8 qui se trouve à l'intérieur de la classe .container_16 .

Answer 5

En width: 460px; sera appliquée à l'élément avec la valeur .grid_8 contient la classe à l'intérieur les éléments avec .container_16 et les éléments avec la classe .grid_6 contient la classe à l'intérieur les éléments avec .container_12 .

L'espace signifie patrimoine et la virgule signifie "et". Si vous placez des propriétés avec un sélecteur comme
.class-a, .class-b Les propriétés seront appliquées aux éléments de l'une ou l'autre des deux classes.

J'espère avoir été utile.