Engkus Kusnadi Engkus Kusnadi - 4 months ago 8
CSS Question

Whats wrong with my CSS Selector?

I have a div inside a div. The

.wrapper
is parent of
.level
.

<div class="wrapper">
<div class="level">
Engkus Kusnadi
</div>
</div>


When i gave style to the
.level
with
.wrapper
include as selector, its working fine and the background changed to green.

.wrapper .level {
background:green;
}


But the problem found, when I'm add a style the only
.level
selector background to red, its nothing happen.

.wrapper .level {
background:green;
}

.level {
background:red;
}


Here's my fiddle https://jsfiddle.net/vcb4eqy4/

What I'm wrong? Is there higher level on CSS Selector?

Answer

Your problem is here:

.wrapper .level {
  background:green;
}

.level {
  background:red;
}

By defining .wrapper .level rule, you have defined a more specific rule than .level. If there are conflicting rules, the more specific rule gets applied.

Change your code like below example and you will see what it means:

.wrapper .level {
  background:green;
}

div.wrapper .level {
  background:red; // this is now more 'specific'
}

You can read this article to understand more about these specification.

Comments