Why is my CSS having specificity problems?

Question

Can someone explain me why in this example the first rule is taken not second? According to my CSS specificity knowledge, the second is more specific and should be used. But all browsers use first.

Example:

http://apblog.lv/misc/css_spec/example2.html

CSS:

table.data .negative {
  /* css specificity: 0,0,2,1 */
  color: red;
}
table.data tr.inactive td {
  /* css specificity: 0,0,2,3 */
  color: gray; /* this should be used */
}

HTML:

<table class="data">
  <tr class="inactive">
    <td><span class="negative">should be gray</span></td>
  </tr>
</table>

Answer 1

Your <span class="negative"> is the innermost element, and so is the one with the style that shows. Your <td> may have a different color setting, if you add text outside of the span you will see that is gray.

Answer 2

Well no, why do you think the second is more specific?

Embedded inside the td you have the span and that is the inner-most element with a rule.

So that is more specific.

Answer 3

The span is inside the td, so the first selector is actually more specific.

Answer 4

The reason your classes are not working as expected is because of how you're defining your classes in the HTML, not the CSS. If you notice, the inactive class is set in the containing <tr> element, then overridden by the <span> class, 'negative'. If you want the inactive color style applied above all else, add an !important after the definition of the color:

 table.data tr.inactive td {
      /* css specificity: 0,0,2,3 */
      color: gray !important; /* this should be used */
 }

This will override the negative style regardless.

Answer 5

It might seem that table.data tr.inactive td is more specific, but really table.data .negative is because it is calling the element's class, as opposed to the general element td

Answer 6

This has nothing to do directly with css priority. Both rules are applied, inactive to the td and negative to the span, but the span element is "above" the td element in the html structore (DOM) and thereby overrides the td. Add a text outside the span and you will see that both rules are used.

Answer 7

All bets are off concerning the higher-specificity rule because it targets the TD and not the SPAN. You gotta know when to fold 'em. :-)

---

Edit

You state in a comment that you are not seeing the concept mentioned here: http://www.w3.org/TR/CSS21/cascade.html#cascade

...that's true. You'll find it a couple paragraphs up here: http://www.w3.org/TR/CSS21/cascade.html#inheritance

which states,

"...If no color has been assigned to the [child element], the [child element] will inherit the color of the parent element ... When inheritance occurs, elements inherit computed values. The computed value from the parent element becomes both the specified value and the computed value on the child"

In your example, inheritance principles don't apply since a CSS rule targets the SPAN element directly for the color property.

Answer 8

You have correctly calculated the specificity for each rule, and the specificity of the second rule is a higher value than the specificity of the first rule. BUT specificity is only used to "sort rules with the same importance and origin..." (http://www.w3.org/TR/CSS21/cascade.html#cascading-order) In other words, specificity is a tie breaker, and in this case there is no tie to be broken.

Answer 9

Both rules apply.

If you think of rules being applied as you go down the branches of the DOM tree, then you'll find one stops at the TD, while the .negative rule overwrites that as you arrive in the SPAN element.

To be more specific the second rule applies to the TD and all its child elements TO WHICH THE COLOR PROPERTY CAN PROPAGATE, by default, however when the rendering engine gets to the SPAN, the first rule enters the scene, and overwrites the color value.