vietvoquoc Posted December 8, 2012 Share Posted December 8, 2012 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2012 Share Posted December 8, 2012 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> Link to comment Share on other sites More sharing options...
vietvoquoc Posted December 10, 2012 Author Share Posted December 10, 2012 Oh. Mean i understand right!! .Thanks so much for help me!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now