CSS - Writing classes the right way

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?

It should be `.box.warning` because both the classes are on the same element. `.box .warning` means an element with `class='warning'` which is the child of another element with `class='box'`. — Harry, Aug 13 '14 at 06:54

score 5 · Accepted Answer · answered Aug 13 '14 at 06:54

5

Don't give the space after the .box selector because it's in the same class:

.box.warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

answered Aug 13 '14 at 06:54

Bhojendra Rauniyar

78,842
31
152
211

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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;
}

score 1 · Answer 3 · answered Aug 13 '14 at 06:54

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

score 0 · Answer 4 · answered Aug 13 '14 at 06:55

0

Remove space like this FIDDLE

.box.warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

Or simply write FIDDLE

.warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

answered Aug 13 '14 at 06:55

Richa

3,205
1
23
48

score 0 · Answer 5 · answered Aug 13 '14 at 06:59

0

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.

answered Aug 13 '14 at 06:59

ApceH Hypocrite

1,063
10
27

score 0 · Answer 6 · answered Aug 13 '14 at 07:03

0

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!

answered Aug 13 '14 at 07:03

Nishan Weerasinghe

349
4
26

CSS - Writing classes the right way

6 Answers6

Update

Examples