O que vírgulas e espaços em várias classes significam em CSS?

Aqui está um exemplo que não entendo:

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

Parece-me que isso width: 460pxse aplica a todas as classes acima mencionadas. Mas por que algumas classes são separadas por uma vírgula ( ,) e outras apenas por um espaço?

Suponho que width: 460pxisso será aplicado apenas aos elementos que combinam classes da maneira mencionada no arquivo CSS. Por exemplo, será aplicado a, <div class='container_12 grid_6'>mas não será aplicado ao <div class='container_12'>. Esta suposição está correta?

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

Isso diz "faça com que todos os .grid_6s em .container_12 e todos os .grid_8s em .container_16 com 460 pixels de largura." Portanto, os dois itens a seguir serão processados ​​da mesma forma:

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

Quanto às vírgulas, é a aplicação de uma regra a várias classes, como esta.

.blueCheese, .blueBike {
  color:blue;
}

É funcionalmente equivalente a:

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

Mas reduz a verbosidade.

.container_12 .grid_6 { ... }

Esta regra corresponde a um nó DOM com classe container_12que possui um descendente (não necessariamente um filho) com classe grid_6e aplica as regras CSS ao elemento DOM com classe grid_6.

.container_12 > .grid_6 { ... }

Colocando >entre eles diz que o grid_6nó deve ser um filho direto do nó com classe container_12.

.container_12, .grid_6 { ... }

Uma vírgula, como outros afirmaram, é uma forma de aplicar regras a muitos nós diferentes ao mesmo tempo. Nesse caso, as regras se aplicam a qualquer nó com uma classe de container_12ou grid_6.

Não é exatamente o que foi perguntado, mas talvez isso ajude.

Para aplicar um estilo a um elemento apenas se ele tiver ambas as classes, seu seletor não deve usar nenhum espaço entre os nomes das classes.

Por exemplo:

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

A vírgula agrupa as classes (aplica o mesmo estilo a todas), um espaço vazio informa que o seletor a seguir deve estar dentro do primeiro seletor.

Portanto

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

aplica esse estilo apenas à classe .grid_6que está dentro da .container_12classe e à .grid_8classe que está dentro .container_16.

O width: 460px;será aplicado ao elemento com a .grid_8classe, contido dentro dos elementos com .container_16classe, e elementos com a .grid_6classe, contidos dentro dos elementos com .container_12.

O espaço significa patrimônio, e a vírgula significa 'e'. Se você colocar propriedades com um seletor como
.class-a, .class-b, terá as propriedades aplicadas aos elementos com qualquer uma das duas classes.

Espero ter ajudado.

Você tem quatro classes e dois seletores em seu exemplo:

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

Portanto, .container_12e .grid_6são ambas as classes, mas a regra width: 460pxsó será aplicada a elementos que possuem a .grid_6classe que são descendentes de um elemento que possui a .container_16classe.

Por exemplo:

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

O acima significa que você está aplicando estilos a duas classes, indicadas pela vírgula.

Quando você vê dois elementos lado a lado não separados, pode presumir que se refere a uma área dentro de uma área. Portanto, no exemplo acima, este estilo só se aplica às classes grid_6 dentro das classes container_12 e classes grid_8 dentro das classes container_16.

no exemplo:

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

A primeira grade_6 não será afetada, enquanto a segunda classe grid_6 será porque está contida dentro de um container_12.

Uma declaração como

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

Só aplicaria o negrito para

tags dentro de áreas que têm "descrição" de classe que estão dentro de uma área com 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:460pxserá aplicado apenas a .grid_6e.grid_8

Edit: Aqui está um artigo muito bom para você

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

As combinações de seletores obtêm significados diferentes - a imagem anexada explica facilmente

a) Seletores múltiplos separados por vírgula (“,”) - Os mesmos estilos são aplicados a todos os elementos selecionados.

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

Aqui, o estilo da borda é aplicado aos elementos DIV e aos elementos aplicados da classe CSS (.elmnt-color).

b) Seletores múltiplos separados por espaço - são chamados de seletores descendentes.

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

}

Aqui, o estilo da borda é aplicado aos elementos aplicados da classe CSS (.elmnt-color) que são elementos filhos do elemento DIV.

c) Seletores múltiplos especificados sem espaço - aqui os estilos são aplicados a elementos que atendem a todas as combinações.

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

Aqui, o estilo da borda é aplicado apenas aos elementos DIV aplicados da classe CSS (.elmnt-color).

Os detalhes estão anexados em https://www.csssolid.com/css-tips.html

Nota: CSS Class é um dos CSS Selector. A regra acima é aplicável a todos os seletores CSS (ex: Classe, Elemento, ID etc.).