CODEWITHSUNDEEP
css
dynamic
dynamic

Reputation: 48091

CSS rules priority

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/

Upvotes: 3

Views: 1357

Answers (5)

sheriffderek
sheriffderek

Reputation: 9043

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

Upvotes: 1

Blender
Blender

Reputation: 298106

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.

Upvotes: 3

William Seiti Mizuta
William Seiti Mizuta

Reputation: 7985

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.

Upvotes: 3

Magnus
Magnus

Reputation: 980

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.

Upvotes: 2

tahdhaze09
tahdhaze09

Reputation: 2213

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.

Upvotes: 1

Related Questions