¿Qué significan las comas y los espacios en varias clases en CSS?

.container_12 .grid_6 { ... }

Esta regla coincide con un nodo DOM con class container_12 que tiene un descendiente (no necesariamente un hijo) con class grid_6, y aplica las reglas CSS al elemento DOM con class grid_6.

.container_12 > .grid_6 { ... }

Poner > entre ellos dice que el nodo grid_6 debe ser un hijo directo del nodo con clase container_12.

.container_12, .grid_6 { ... }

Una coma, como otros han dicho, es una forma de aplicar reglas a muchos nodos diferentes a la vez. En este caso, las reglas se aplican a cualquier nodo con una clase de container_12 o grid_6.

No es exactamente lo que se preguntó, pero tal vez esto ayudará.

Para aplicar un estilo a un elemento solo si tiene ambas clases, su selector no debe usar espacio entre los nombres de las clases.

Por Ejemplo:

.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>

Coma agrupa las clases (aplica el mismo estilo a todas ellas), un espacio vacío indica que el siguiente selector debe estar dentro del primer selector.

Por lo tanto

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

Aplica ese estilo solo a la clase .grid_6 que está dentro de la clase .container_12 y a la clase .grid_8 que está dentro de .container_16.

El width: 460px; se aplicará al elemento con la clase .grid_8, contenido dentro de los elementos con la clase .container_16, y a los elementos con la clase .grid_6, contenidos dentro de los elementos con .container_12.

El espacio significa herencia, y la coma significa 'y'. Si pones propiedades con un selector como
.class-a, .class-b, tendrá las propiedades aplicadas a los elementos con cualquiera de las dos clases.

Espero haber ayudado.

Tienes cuatro clases y dos selectores en tu ejemplo:

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

Así que .container_12 y .grid_6 son ambas clases, pero la regla width: 460px solo se aplicará a los elementos que tienen la clase .grid_6 que son descendientes de un elemento que tiene la clase .container_16.

Por ejemplo:

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

Lo anterior significa que está aplicando estilos a dos clases, indicadas por la coma.

Cuando ve dos elementos uno al lado del otro no separados, puede asumir que se refiere a un área dentro de un área. Así que en lo anterior, este estilo solo se aplica a las clases grid_6 dentro de las clases container_12 y a las clases grid_8 dentro de las clases container_16.

En el ejemplo:

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

La primera grid_6 no se efectuará mientras que la segunda clase grid_6 lo hará porque es contenido dentro de un container_12.

Una declaración como

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

Sólo aplicaría la negrita a

Etiquetas dentro de áreas que tienen clase "descripción" que están dentro de un área con id "admin", como:

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

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

width:460px se aplicará únicamente a .grid_6 y .grid_8

Editar: Aquí hay un muy buen artículo para usted

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