¿Qué significan comas y espacios en múltiples clases en CSS?

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

Eso dice “make all .grid_6’s dentro de .container_12’s y all .grid_8’s dentro de .container_16’s 460 pixels de ancho.” Por lo tanto, ambos de los siguientes harán lo mismo:

 
 
460px Wide
 
 
 
460px Wide
  

En cuanto a las comas, está aplicando una regla a varias clases, como esta.

 .blueCheese, .blueBike { color:blue; } 

Es funcionalmente equivalente a:

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

Pero reduce la verbosidad.

 .container_12 .grid_6 { ... } 

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

 .container_12 > .grid_6 { ... } 

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

 .container_12, .grid_6 { ... } 

Una coma, como han dicho otros, 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 ayude.

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

Por ejemplo:

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

 
Bold Red Text
 
Bold Text (not red)
 
Bold Green Text 

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 , contenida dentro de los elementos con la clase .container_16 , y los elementos con la clase .grid_6 , contenidos dentro de los elementos con .container_12 .

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

Espero que haya 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 el width: 460px la regla width: 460px solo se aplicará a los elementos que tengan la clase .grid_6 que sean descendientes de un elemento que tenga la clase .container_16 .

Por ejemplo:

 
 
This has a width of 480px.
 
This has an unknown width.
  

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 suponer que se refiere a un área dentro de un área. Entonces, en el ejemplo anterior, este estilo solo se aplica a las clases grid_6 dentro de las clases container_12 y grid_8 dentro de las clases container_16.

en el ejemplo:

 
This is not effected
 
 
 This is effected. 
  

El primer grid_6 no se verá afectado mientras que el segundo grid_6 lo hará porque está dentro de un contenedor_12.

Una statement como

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

Solo aplicaría el negrita a

tags dentro de áreas que tienen “descripción” de clase que están dentro de un área con id “admin”, como:

 
 
 
This is bold
 
  

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

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

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

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