CODEWITHSUNDEEP
htmlcss
oliverbj
oliverbj

Reputation: 6052

CSS - Writing classes the right way

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?

Upvotes: 1

Views: 87

Answers (6)

Federico J.
Federico J.

Reputation: 15882

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

Upvotes: 1

Nishan Weerasinghe
Nishan Weerasinghe

Reputation: 349

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!

Upvotes: 0

ApceH Hypocrite
ApceH Hypocrite

Reputation: 1113

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.

Upvotes: 0

Richa
Richa

Reputation: 3289

Remove space like this FIDDLE

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

Or simply write FIDDLE

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

Upvotes: 0

BenM
BenM

Reputation: 53198

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

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

Upvotes: 5

Related Questions