CSS - Writing classes the right way - html

Question

I guess this is quite simple, although I can't seem to wrap my head around why my CSS code doesn't work.
This is my code:
.box{
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.box .warning{
background: #FFF7F2;
border: 1px solid #ffefe5;
}
<div class="col-xs-4">
<div class="box warning">dfda</div>
</div>
And a fiddle to show it in action..
http://jsfiddle.net/91b21z8k/
**My problem is, why doesn't the <div> have the .warning class assigned to it?

Answer 1

Don't give the space after the .box selector because it's in the same class:
.box.warning{
background: #FFF7F2;
border: 1px solid #ffefe5;
}

Answer 2

Because including a space in the definition means the selector will target .warning elements which are children of .box; not .box elements which also have a class of .warning.
To target the <div class="box warning"></div>, simply remove the space in your selector's name:
.box.warning{
background: #FFF7F2;
border: 1px solid #ffefe5;
}
Please see this updated jsFiddle

Answer 3

Because when you make .box .warning you're referring to a son with the class "box" of an element with the class "warning". It's never going to work.
If you did .col-xs-4 .warning, you'd have the style applied
Doc about selectors and how to apply them:
http://www.w3.org/TR/css3-selectors/#selectors
Update
check #C-link Nepal answer to get the last point (if you have to accept an answer, he gave the right answer first, XD): Removing the space between classes makes styles only applied to elements which will have all the classes present on the rule:
About the classes selector: http://www.w3.org/TR/css3-selectors/#class-html
Examples
To paint in red the paragraph:
<div class="perry">
<p class="mason">Hi</p>
</div>
.perry .mason {
color: red;
}
<div>
<p class="perry mason">Hi</p>
</div>
.perry.mason {
color: red;
}

Answer 4

Remove space like this FIDDLE
.box.warning{
background: #FFF7F2;
border: 1px solid #ffefe5;
}
Or simply write FIDDLE
.warning{
background: #FFF7F2;
border: 1px solid #ffefe5;
}

Answer 5

If you want style div nested into div.box then write
<div class="col-xs-4 box">
<div class="warning">dfda</div>
</div>
Space between classes in CSS means hierarchy of elements defined by selectors.

Answer 6

Remove the spase between two class names
.box{
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.box.warning{
background: #FFF7F2;
border: 1px solid #ffefe5;
}
Here's JSFiddle Demo!