CSS nesting rules on same class tag

Question

I have two css styles, the second of which I only want to take effect when the first is present. How would I go about that? I know that you can add more than one class to a class tag, but it doesn't seem to work to nest the css tags the same way.

.stat{float: left; width: 200px; height: 40px; padding: 5px; margin: 5px; border: 1px solid #000;}
.stat .red{background-color: #c00;}


<!-- This should have the background color -->
<div class="stat red">

<!-- This should not have the background color -->
<div class="red">

<!-- This should not have the background color -->
<div class="stat">

Answer 1

just leave out the space:

.stat.red{background-color: #c00;}