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

Aquí hay un ejemplo que no entiendo:

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

Me parece que el width: 460px se aplica a todas las clases mencionadas anteriormente. Pero ¿por qué algunas clases están separadas por una coma ( , ) y algunas solo por un espacio?

Supongo que el width: 460px se aplicará solo a aquellos elementos que combinen clases en la forma mencionada en el archivo CSS. Por ejemplo, se aplicará a

pero no se aplicará a

. ¿Es correcta esta suposición?

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