CSS'de 2 class arasında boşluk olup olmaması hakkında

Merhabalar arkadaşlar. Yaklaşık 4 yıldır iyi kötü bir site yönetiyorum. Bu site sayesinde CSS öğrendim ancak hâlâ bilmediğim şeyler de yok değil. Merak ettiğim olay şu ikisi arasındaki fark, ikisinin işlev farkı nedir?

.class1.class2 {
color: #fff;
}
.class1 .class2 {
color: #fff;
}

Doğru kullanım şekli budur.

<div class="class1 class2">1 Numara</div>

<div class="class1">
     <div class="class2">2 Numara</div>
</div>

.class1.class2 {color: black;}  */Buradan hem class1 hem class2 ye aynı anda sahip olan elemanlar etkilenir.

.class1 .class2 {color: black;}  */(Arada Boşluk Var) Buradan class1 class ına sahip elemanları içerisindeki class2 class ına sahip elemanlar etkilenir.

.class1, .class2 {color: black;}  */(Arada Virgül Var) Buradan class1 ve class2 class ına sahip elemanlar etkilenir.

Evet bu daha doğru bir tanım oldu.

Teşekkürler, açıklayıcı oldu. Peki 1. durumda, class'ların yazılma sırası önemli mi?

Aklıma şimdi geldi, bir de .class1 .class2 ile .class1 > .class2 arasındaki fark nedir acaba?

sıra önemli değil..

.class1 >.class2 bunun diğerinden farkı .class1 den sonra hemen gelen .class2 yi seçmesi. birden fazla .class2 var ise direk ilk hemen altındaki gördüğünü seçer. arada başka bir tag varsa başka bir tag olanı seçmez..

.class1.class2 => <div class="class1 class2"></div> DEMEKTİR.
.class1 .class2 => <div class="class1"><div class="class2"></div></div> DEMEKTİR.

.class1 .class2 => <div class="class1"><div><div class="class2"></div></div></div> ÇALIŞIR İKEN
.class1 > .class2 => <div class="class1"><div><div class="class2"></div></div></div> ÇALIŞMAZ. > işaretinden dolayı direkt bir alt divde olmalı. Yani şöyle:
.class1 > .class2 => <div class="class1"><div class="class2"></div></div> ÇALIŞIR.

Umarım açıklayıcı olmuştur.