CSS rules priority

Question

I have this simple CSS:

.cont div {

  margin:10px;
  border:1px solid;
}

.mark {   /* This get ignored? */

 margin:30px;
}

With this markup:

<div class="cont">
  <div>a</div>
  <div class="mark">b</div>
</div>

I except the div.mark having margin:30px; but at least in Chrome this isn't true because the generic rule .cont div seems to have a higher priority.

Consider I don't want to use !important are there any other way to solve this?

http://jsfiddle.net/xNVRm/

Answer 1

Just make your selector more specific by adding the tag name:

div.mark {
    margin:30px;
}

Demo: http://jsfiddle.net/xNVRm/1/

You could also use .cont .mark if you want to avoid using the tag name.

Answer 2

In order to avoid to use the important you need to make your css selector more specific. You can use .cont div.mark. It is more specific than div.mark.