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

Voici un exemple que je ne comprends pas:

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

Il me semble que cela width: 460pxs'applique à toutes les classes mentionnées ci-dessus. Mais pourquoi certaines classes sont séparées par une virgule ( ,), et d'autres par un espace?

Je suppose que cela width: 460pxne sera appliqué 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é au <div class='container_12'>. Cette hypothèse est-elle correcte?

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

Cela dit "faites en sorte que tous les .grid_6 dans les .container_12 et tous les .grid_8 dans les .container_16 de 460 pixels de large." Ainsi, les deux éléments suivants auront le même rendu:

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

Quant aux virgules, elles appliquent une règle à plusieurs classes, comme ceci.

.blueCheese, .blueBike {
  color:blue;
}

C'est fonctionnellement équivalent à:

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

Mais réduit la verbosité.

.container_12 .grid_6 { ... }

Cette règle fait correspondre un nœud DOM avec une classe container_12qui a un descendant (pas nécessairement un enfant) avec une classe grid_6, et applique les règles CSS à l'élément DOM avec classe grid_6.

.container_12 > .grid_6 { ... }

Mettre >entre eux indique que le grid_6nœud doit être un enfant direct du nœud avec la classe container_12.

.container_12, .grid_6 { ... }

Une virgule, comme d'autres l'ont indiqué, est un moyen d'appliquer des règles à de nombreux nœuds différents à la fois. Dans ce cas, les règles s'appliquent à tout nœud avec une classe de container_12ou grid_6.

Pas exactement ce qui a été demandé, mais peut-être que cela aidera.

Pour appliquer un style à un élément uniquement s'il a les deux classes, votre sélecteur ne doit utiliser aucun espace entre les noms de classe.

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>

La virgule regroupe les classes (leur applique le même style à toutes), un espace vide indique que le sélecteur suivant doit être dans le premier sélecteur.

Par conséquent

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

applique ce style uniquement à la classe .grid_6qui est dans la .container_12classe et à la .grid_8classe qui est à l'intérieur .container_16.

Le width: 460px;sera appliqué à l'élément avec la .grid_8classe, contenu à l' intérieur des éléments avec la .container_16classe, et les éléments avec la .grid_6classe, contenus à l' intérieur des éléments avec .container_12.

L'espace signifie patrimoine et la virgule signifie «et». Si vous mettez des propriétés avec un sélecteur comme
.class-a, .class-b, vous aurez les propriétés appliquées aux éléments avec n'importe laquelle des deux classes.

J'espère avoir aidé.

Vous avez quatre classes et deux sélecteurs dans votre exemple:

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

Donc .container_12et .grid_6sont les deux classes, mais la règle width: 460pxne sera appliquée qu'aux éléments qui ont la .grid_6classe qui sont les descendants d'un élément qui a la .container_16classe.

Par exemple:

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

Ce qui précède signifie que vous appliquez des styles à deux classes, indiquées par la virgule.

Lorsque vous voyez deux éléments côte à côte non séparés, vous pouvez supposer qu'il fait référence à une zone dans une zone. Donc, dans ce qui précède, ce style s'applique uniquement aux classes grid_6 à l'intérieur des classes container_12 et aux classes grid_8 à l'intérieur des classes container_16.

dans l'exemple:

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

Le premier grid_6 ne sera pas effectué alors que la deuxième classe grid_6 le sera car il est contenu dans un container_12.

Une déclaration comme

#admin .description p { font-weight:bold; }

N'appliquerait que le gras à

les balises dans les zones qui ont la classe "description" qui sont à l'intérieur d'une zone avec l'ID "admin", telles que:

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

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

width:460pxne sera appliqué qu'à .grid_6et.grid_8

Edit: Voici un très bon article pour vous

http://css-tricks.com/multiple-class-id-selectors/

Les combinaisons de sélecteurs ont différentes significations - l'image ci-jointe explique facilement

a) Plusieurs sélecteurs séparés par une virgule («,») - Les mêmes styles sont appliqués à tous les éléments sélectionnés.

div,.elmnt-color {
   border:1px solid red;
}

Ici, le style de bordure est appliqué aux éléments DIV et aux éléments appliqués à la classe CSS (.elmnt-color).

b) Sélecteurs multiples séparés par un espace - Ceux-ci sont appelés sélecteurs descendants.

div .elmnt-color {
background-color:red;

}

Ici, le style de bordure est appliqué aux éléments appliqués de la classe CSS (.elmnt-color) qui sont des éléments enfants de l'élément DIV.

c) Sélecteurs multiples spécifiés sans espace - Ici, les styles sont appliqués aux éléments qui répondent à toutes les combinaisons.

div.elmnt-color {
    border:1px solid red;
}

Ici, le style de bordure est appliqué aux éléments DIV appliqués de la classe CSS (.elmnt-color) uniquement.

Les détails sont joints à https://www.csssolid.com/css-tips.html

Remarque: la classe CSS est l'un des sélecteurs CSS. La règle ci-dessus est applicable à tous les sélecteurs CSS (ex: Classe, Élément, ID, etc.).