CODEWITHSUNDEEP
csscss-selectors
user64952
user64952

Reputation: 21

Why is my CSS having specificity problems?

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>

Upvotes: 2

Views: 537

Answers (8)

user58777
user58777

Reputation:

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.

Upvotes: 0

cjk
cjk

Reputation: 46415

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.

Upvotes: 11

Carl Camera
Carl Camera

Reputation: 4772

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.

Upvotes: 3

David Kolar
David Kolar

Reputation: 3485

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.

Upvotes: 0

bang
bang

Reputation: 5221

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.

Upvotes: 0

benmmc
benmmc

Reputation: 21

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

Upvotes: 0

chuckg
chuckg

Reputation: 9415

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.

Upvotes: 0

Aram Verstegen
Aram Verstegen

Reputation: 2427

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

Upvotes: 0

Related Questions