<style type="text/css">
.red { color: red; }
.underline { color: purple; text-decoration: underline; }
.red .underline { color: pink; text-decoration: underline; }/*space between classes*/
.green { color: green; }
.italic { font-style: italic; }
.green.italic { color: lime; font-style: normal; }/* no space between classes*/
</style>
Items F and H are both nested divs and the style of F has a space between the two classes in the style while H does not have a space between the classes in the style. Item F has operated the combined style .red .underline while H did not operate .green.italic; does not operate combined style.
Styles
.classA { style 1; }
.classB { style 2; }
.classA .classB { style 3; } (a space between classes)
.classC { style 4; }
.classD { style 5; }
.classC.classD { style 6; } (no space between classes)
Markup
.classA .classB will work for a nested div situation:-
<div class="classA">Text in div will be style 1
<div class="classB">Text in div will be style 3
</div></div>
In a single div with both classes:-
<div class="classA classB">Text in div will be styles 1 and 2</div>
.classC.classD will work in a situation where a single div has both classes:-
<div class="classC classD">Text in div will be style 6</div>
In a nested div with both classes:-
<div class="classC">Text in div will be style 4
<div class="classD">Text in div will be style 5
</div></div>
CONCLUSION:-
The combined style with a space between the classes like .classA .classB { style 3; } works in a nested div situation where the .classA style works in the first div with class="classA" and the combined .classA. classB style works in the second div which has class="classB" because it follows the first div.
The combined style with no space between the classes like .classC.classD { style 6; } works in a single div which has both classes stated like <div class="classC classD">Text</div>.