How does the CSS specificity work?

Question

I have some CSS classes which are chained. Can some one explain how the following code works? It displays the text as green. Can someone explain?

<html>

<head>
  <style>
    .a .c {
      color: red;
    }
    .b .c {
      color: green;
    }
    .c {
      color: blue;
    }
  </style>
</head>

<body>
  <div class="a">
    <div class="b">
      <div class="c">
        hi
      </div>
    </div>
  </div>
</body>

</html>

What are you expecting? You might want to read up on selector specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — j08691, Jul 23 '15 at 14:44
frankly i was expecting blue. Thinking that c class would be implemented. — , Jul 23 '15 at 14:47
That is not called chained classes by the way, this is chained i.e `.a.b.c {...} `no gaps between the classes, but that won't work with your markup. Learn more [here](https://css-tricks.com/multiple-class-id-selectors/). — Stickers, Jul 23 '15 at 15:03
http://stackoverflow.com/questions/2809024/points-in-css-specificity — Paulie_D, Jul 23 '15 at 17:53

score 3 · Accepted Answer · answered Jul 23 '15 at 14:48

The first says that any an item with class c inside of any item with of class a will be colored red.

.a .c {
    color: red;
}

The second says that any an item with class c inside of any item of class b will be colored green. It takes precedence over the first rule as it is just as deep as the first rule, but defined after that rule.

.b .c {
    color: green;
}

This says that any item with the class c should be blue. But since it is not as descriptive as the rules above, it does not take precedence. If you have an item with class c that is not nested inside a class a or b, then this rule will take effect.

.c {
    color: blue;
}

So there are two rules to remember:

The more specific rules get higher precedence
The later defined rules get higher precedence than their just-as-specific counterparts.

score 2 · Answer 2 · answered Jul 23 '15 at 14:44

All down to specificity.

Multiple CSS rules may target the same element, but those of higher specificity will supercede all others.

In your scenario, .b .c is more specific than just .c. Thus, the former is the 'winning' rule (which has a color of green set).

The following is a nice intro to the concept I'm talking about:

http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Navid EMAD · Answer 3 · 2015-07-23T15:12:36.580

It's not chained class, but more a question about Cascading Order and Inheritance in CSS.

You have to know that in Cascading Style Sheets you have some reading priority.

The orders of your rules is very important.

In your example:

.a .c { color: red   }
.b .c { color: green }
   .c { color: blue }

<div class="a">
  <div class="b">
    <div class="c">
      text
    </div>
  </div>
</div>

The last selector declaration will "always" take precedence, only if their selector's lengths are equals. More your selector is specific, more is his priority.

The last one is .c { color: blue } (but the selector's length is only "2")
Instead of .a .c { color: red } (that is "5")
Then we can see that we have an another selector .b .c and .a .c (but here .b .c is the latest declared selector)

So .b .c { color: green } is applied.

Some others example to understand:

Here just for understand that the order is important:

.b .c { color: green }
.a .c { color: red   }
   .c { color: blue  }

<div class="a">
  <div class="b">
    <div class="c">
      text
    </div>
  </div>
</div>

Here for understand that length is important:

.b .c    { color: green }
.a div.c { color: blue  }
.a .c    { color: red   }

<div class="a">
  <div class="b">
    <div class="c">
      text
    </div>
  </div>
</div>

Dan Gamble · Answer 4 · 2015-07-23T15:04:23.237

0

Cascading Style Sheets

The last declaration will always take precedence if there are equal declarations before it.

Think of it like 1 class is equal to 1 point.

.a = 1 point

.b = 1 point

.c = 1 point

.a .c = 2 points

.b .c = 2 points

So in your case of .a .c & .b .c declarations they are equal in points and have more than just the .c declaration. So the next thing CSS looks at is what comes last. Since you the .b .c declaration comes last in the stylesheet this is the one the browser will use for styling.

edited Jul 23 '15 at 15:04

answered Jul 23 '15 at 14:44

Dan Gamble

3,427
21
40

What about the c class? Does that have lower precedence over .b .c? – Jul 23 '15 at 14:48
@SaurabhMahajan Yes in this case it does. If you are used to other programming languages it looks like: http://pastebin.com/pqLSuprf – Dan Gamble Jul 23 '15 at 14:59

score 0 · Answer 5 · answered Jul 23 '15 at 14:45

0

The text is displayed as green because of CSS specificity. A selector with two classes override a selector with only one. And the reason it's green and not red, is because .b .c came last.

answered Jul 23 '15 at 14:45

Galen Gidman

517
2
9

boszlo · Answer 6 · 2015-07-23T20:30:32.613

0

First rule sets color then the second rule overwrites the first one as it comes as second and both rules have same specificity. The third rule is less specific so is omitted.

edited Jul 23 '15 at 20:30

answered Jul 23 '15 at 14:47

boszlo

996
8
14

score 0 · Answer 7 · answered Jul 23 '15 at 14:52

You need to know that order is important for styles, example:

.a .c { /* styles*/} // go first 
.b .c { /* styles*/} // go next

second styles overload styles wrote before .c inside .a and .b (take last) but not overload .c class because of .c is common case styles;

How does the CSS specificity work?

7 Answers7

Linked

Related