<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 and the combined .classA. classB style works in the second div which has .classB.
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>.