Whats wrong with my CSS Selector?

Question

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 1

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.