CSS rules priority - css

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.

Answer 3

The ".cont div" declaration overrides the ".mark" declaration because it's actually more specific. CSS uses a kind of point system to figure out which rules apply. In your case, ".cont div" specifies both a class and an element inside it, whereas ".mark" only specifies a class.
For the exact rules that should be used by all conforming browsers, see this link: http://www.w3.org/TR/CSS21/cascade.html#specificity
In your case you could fix this by using ".cont .mark" in the second declaration.

Answer 4

Specificity is key to how CSS rules are given a pecking order. Try looking at this article from HTML Dog:
http://www.htmldog.com/guides/cssadvanced/specificity/
You could use div.mark instead, which means any div that has the class of mark, do this.

Answer 5

Looking over this again, I see I wasn't understanding what you were trying to do. I think I see now.
You are is saying - ANY div inside of anything with class .cont will have 10px margin. It's more specific then .mark. .mark is 30px - BUT it's a div that is inside of .cont - so it's 10px. It reads right to left - that is a good way to think about it and check specificity.
I have come to think of things with a more object oriented approach. What do you think about this approach?
HTML
<div class="container section01">
<div class="block a">a</div>
<div class="block b">b</div>
</div>
CSS
.container {
width: 100%;
float: left;
border: 1px solid red;
}
.container .block {
/* you can style these site wide */
}
.section01 .block {
border:1px solid black;
padding:10px;
margin-bottom: 1em;
}
.section01 .block:last-of-type {
margin-bottom: 0;
}
.section01 .a {
background-color: red;
}
.section01 .b {
background-color: lightblue;
}
SASS would make this much easier.
a jsFiddle of this example
a CODEPEN of this on a larger scale