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?

Use `.level.level` and it won't lose. I don't see the point, though. — Oriol, Jul 18 '16 at 04:02
You can also change the styles in the browser using developer tools. That can be the best way, along with some reading, to gain an understanding of how priorities work in CSS selectors. — Jeff Siver, Jul 18 '16 at 04:07
You could also add !important to your css property. i.e. background:red !important; — dresdain, Jul 18 '16 at 04:10

score 2 · Accepted Answer · answered Jul 18 '16 at 04:03

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.

Whats wrong with my CSS Selector?

1 Answers1