what does multiple class references in css do? -

so question need bit more explaining.

what difference between this:

.class1 .class2 {blahblah} 

this:

.class1, .class2 {blahblah} 

and this:

.class1 > .class2 {blahblah} 

i'm having trouble understanding differences. i'd explained in detail possible. haven't found anwhere breaks down me in way i'm looking for. thank you.

.class1 .class2 {blahblah} affects element class2 ancestor element having .class1

.class1, .class2 {blahblah} means css rules affects element having class1 or class2

.class1 > .class2 {blahblah} means .class1 needs parent of class2.

examples:

<elementa class="class1">   <elementb class="class2"></elementb> </elementa> 

element b child element both .class1 .class2 {} , .class1 > .class2 {} definition affect it.

<elementa class="class1">   <elementc>       <elementb class="class2"></elementb>   </elementc> </elementa> 

in case .class1 .class2 {} correct because there no direct relation parent->child between element b , a.

.class1 .class2 {}

and last one

<elementa class="class1"></elementa> <elementb class="class2"></elementb> 

only .class1, .class2 {} work because there no parent/child/ancestor relation between these elements.

you may find this link interesting.