How does the CSS specificity work? [duplicate]

css

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>

Solution 1:

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.

Solution 2:

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/

Solution 3:

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>

How does the CSS specificity work? [duplicate]

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts