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

Aquí hay un ejemplo que no entiendo:

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

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

Supongo que width: 460pxse aplicará solo a aquellos elementos que combinen clases de la forma mencionada en el archivo CSS. Por ejemplo, se aplicará a, <div class='container_12 grid_6'>pero no se aplicará a <div class='container_12'>. ¿Es esta suposición correcta?

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

Eso dice "hacer todos los .grid_6 dentro de .container_12 y todos los .grid_8 dentro de los 460 píxeles de ancho de .container_16". Entonces, ambos de los siguientes generarán lo mismo:

<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 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 hace coincidir un nodo DOM con la clase container_12que tiene un descendiente (no necesariamente un hijo) con la clase grid_6, y aplica las reglas CSS al elemento DOM con la clase grid_6.

.container_12 > .grid_6 { ... }

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

.container_12, .grid_6 { ... }

Una coma, como han dicho otros, es una forma de aplicar reglas a muchos nodos diferentes al mismo tiempo. En este caso, las reglas se aplican a cualquier nodo con una clase de container_12o grid_6.

No es exactamente lo que se preguntó, pero quizás esto ayude.

Para aplicar un estilo a un elemento solo si tiene ambas clases, su selector no debe usar espacios 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>

La 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_6que está dentro de la .container_12clase y a la .grid_8clase que está dentro .container_16.

Se width: 460px;aplicará al elemento con la .grid_8clase, contenido dentro de los elementos con .container_16clase, y elementos con la .grid_6clase, contenido 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 haber ayudado.

Tiene cuatro clases y dos selectores en su ejemplo:

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

Así .container_12y .grid_6son ambas clases, pero la regla width: 460pxsolo se aplicará a los elementos que tengan la .grid_6clase que sean descendientes de un elemento que tenga la .container_16clase.

Por ejemplo:

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

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

Cuando ve dos elementos uno al lado del otro no separados, puede asumir que se refiere a un área dentro de un área. Entonces, en lo anterior, este estilo solo se aplica a las clases grid_6 dentro de las clases container_12 y 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 clase grid_6 no se verá afectada mientras que la segunda clase grid_6 lo hará porque está contenida dentro de un container_12.

Una declaración como

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

Solo aplicaría el negrita a

Etiquetas dentro de áreas que tienen una "descripción" de clase que están dentro de un área con la identificación "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:460pxSólo se aplica a .grid_6y.grid_8

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

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

Las combinaciones de selectores obtienen diferentes significados: la imagen adjunta se explica fácilmente

a) Varios selectores separados por una coma ( ,): se aplican los mismos estilos a todos los elementos seleccionados.

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

Aquí el estilo de borde se aplica a los DIVelementos y los .elmnt-colorelementos aplicados de la clase CSS .

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) Múltiples selectores separados por espacio: se denominan selectores descendientes.

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

Aquí el estilo de borde se aplica a los .elmnt-colorelementos aplicados de la clase CSS que son elementos secundarios de un DIVelemento.

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

c) Múltiples selectores especificados sin espacio - Aquí los estilos se aplican a elementos que cumplen con todas las combinaciones.

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

Aquí el estilo de borde se aplica solo a DIVelementos con una clase CSS de .elmnt-color.

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

Los detalles se adjuntan en https://www.csssolid.com/css-tips.html

Nota: CSS Class es solo uno de los selectores de CSS. Estas reglas se aplican a todos los selectores de CSS (por ejemplo, clase, elemento, ID, etc.).