Cosa significano virgole e spazi in più classi in CSS?

Ecco un esempio che non capisco:

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

Mi sembra che width: 460pxsi applichi a tutte le classi sopra menzionate. Ma perché alcune classi sono separate da una virgola ( ,) e altre solo da uno spazio?

Presumo che width: 460pxverrà applicato solo a quegli elementi che combinano classi nel modo menzionato nel file CSS. Ad esempio, verrà applicato a <div class='container_12 grid_6'>ma non verrà applicato a <div class='container_12'>. Questa ipotesi è corretta?

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

Che dice "rendere tutti i .grid_6 all'interno di .container_12 e tutti i .grid_8 entro i 460 pixel di .container_16." Quindi entrambi i seguenti renderanno lo stesso:

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

Per quanto riguarda le virgole, applica una regola a più classi, come questa.

.blueCheese, .blueBike {
  color:blue;
}

È funzionalmente equivalente a:

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

Ma riduce la verbosità.

.container_12 .grid_6 { ... }

Questa regola corrisponde a un nodo DOM con classe container_12che ha un discendente (non necessariamente un figlio) con classe grid_6e applica le regole CSS all'elemento DOM con classe grid_6.

.container_12 > .grid_6 { ... }

Mettendoli >tra di loro si dice che il grid_6nodo deve essere un figlio diretto del nodo con classe container_12.

.container_12, .grid_6 { ... }

Una virgola, come altri hanno affermato, è un modo per applicare le regole a molti nodi diversi contemporaneamente. In questo caso, le regole si applicano a qualsiasi nodo con una classe container_12o grid_6.

Non esattamente quello che è stato chiesto, ma forse questo aiuterà.

Per applicare uno stile a un elemento solo se ha entrambe le classi, il selettore non deve utilizzare spazi tra i nomi delle classi.

Per esempio:

.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 virgola raggruppa le classi (applica lo stesso stile a tutte), uno spazio vuoto indica che il selettore successivo deve trovarsi all'interno del primo selettore.

Perciò

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

applica quello stile solo alla classe .grid_6che è all'interno della .container_12classe e alla .grid_8classe che è all'interno .container_16.

Il width: 460px;verrà applicato all'elemento con la .grid_8classe, contenuto all'interno degli elementi con .container_16classe, e agli elementi con la .grid_6classe, contenuto all'interno degli elementi con .container_12.

Lo spazio significa patrimonio e la virgola significa "e". Se metti proprietà con un selettore come
.class-a, .class-b, avrai le proprietà applicate agli elementi con una qualsiasi delle due classi.

Spero di aver aiutato.

Hai quattro classi e due selettori nel tuo esempio:

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

Quindi .container_12e .grid_6sono entrambe le classi, ma la regola width: 460pxverrà applicata solo agli elementi che hanno la .grid_6classe che sono discendenti di un elemento che ha la .container_16classe.

Per esempio:

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

Quanto sopra significa che stai applicando gli stili a due classi, indicate dalla virgola.

Quando vedi due elementi affiancati non separati puoi presumere che si riferisca a un'area all'interno di un'area. Quindi, in precedenza, questo stile si applica solo alle classi grid_6 all'interno delle classi container_12 e alle classi grid_8 all'interno delle classi container_16.

nell'esempio:

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

La prima grid_6 non verrà effettuata mentre la seconda classe grid_6 lo farà perché è contenuta all'interno di un container_12.

Una dichiarazione come

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

Applicherebbe solo il grassetto a

tag all'interno di aree che hanno la classe "descrizione" che si trovano all'interno di un'area con ID "admin", come ad esempio:

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

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

width:460pxverrà applicato solo a .grid_6e.grid_8

Modifica: ecco un ottimo articolo per te

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

Le combinazioni di selettori hanno significati diversi: l'immagine allegata spiega facilmente

a) Più selettori separati da una virgola (","): gli stessi stili vengono applicati a tutti gli elementi selezionati.

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

Qui lo stile del bordo viene applicato agli elementi DIV e agli elementi applicati della classe CSS (.elmnt-color).

b) Selettori multipli separati da uno spazio - Questi sono chiamati selettori discendenti.

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

}

Qui lo stile del bordo viene applicato agli elementi applicati della classe CSS (.elmnt-color) che sono elementi figlio dell'elemento DIV.

c) Più selettori specificati senza spazio: qui gli stili vengono applicati agli elementi che soddisfano tutte le combinazioni.

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

Qui lo stile del bordo viene applicato solo agli elementi DIV applicati alla classe CSS (.elmnt-color).

I dettagli sono allegati su https://www.csssolid.com/css-tips.html

Nota: CSS Class è uno dei CSS Selector. La regola precedente è applicabile a tutti i selettori CSS (es: Classe, Elemento, ID ecc.).