what is the right way about add multiple classes into element?

[vietvoquoc]

Hello everybody!This is the first topic of me and hope you sympathetic when i have some mistake . My problem is i'm very confuse about add multiple classes into element and i want to make sure i understand right. i confuse about the white space when i write : .test1.test2{ some style } or .test1 .test2{some style} what different between them? i think the first style for 2 classes inside 1 element and second for 2 element for 1 each class. look like this: My code test:

  <style>.test1{width:100%;height:200px;overflow:hidden;margin:40px auto;background:#C5C5C5;font-size:2em;}		  .test1.test2{background:black;font-size:1em;color:White;}</style><div class="test1 test2">		    some text go here for text	    </div>

Can i write code above with 1 white space between test1 and test2 class?? Or the white space only use when have relative like parent element and child element like this:

<style>.test1{width:100%;height:200px;overflow:hidden;margin:40px auto;background:#C5C5C5;font-size:2em;}		  .test1 .test2{background:black;font-size:1em;color:White;}</style><div class="test1">		    <div class="test2">		 		    some text go here for text			  </div>	    </div>

I understand right or wrong? Hope you correct me ! Thanks.

[dsonesuk]

Every space represents a cascade down to a child element.

<style>.test1{width:100%;height:200px;overflow:hidden;margin:40px auto;background:#C5C5C5;font-size:2em;}.test1 .test2{background:black;font-size:1em;color:White;}</style><div class="test1">                    <div class="test2">                                     some text go here for text                          </div>            </div>

but you could achieve the same result with

.test1{width:100%;height:200px;overflow:hidden;margin:40px auto;background:#C5C5C5;font-size:2em;}.test2{background:black;font-size:1em;color:White;}

but you can also change the style of specific .test2 class by targeting it specific parent

<style>.test1{width:100%;height:200px;overflow:hidden;margin:40px auto;background:#C5C5C5;font-size:2em;}.test2{background:black;font-size:1em;color:White;}.test1R .test2{background:lime;font-size:1em;color:black;}</style><div class="test1">                    <div class="test2">                                     some text go here for text                          </div>            </div><div class="test1 test1R">                    <div class="test2">                                     some text go here for text with test1 and test1R                          </div>            </div>

[vietvoquoc]

Oh. Mean i understand right!! .Thanks so much for help me!!