Overlapping rules in CSS - what is the true logic behind?

Question

Consider the following:

<td class="datepickerDisabled"><a href="#"><span>12</span></a></td>

In my css, there are two rules that would match for this selector:

tbody.datepickerDays td:hover {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: #ddd;
}

And the second one is:

td.datepickerDisabled:hover {
  background-color: white;
}

The second rule for setting background-color to white is not matched. I would think that would be the rule overriding the previous rule since it is more specific (cells with class datepickerDisabled).

Answer 1

"0,0,2,2 vs 0,0,2,1. The first one clearly wins."

tbody           Element      d
.datepickerDays Class        c
td              Element      d
:hover          Pseudo-class c
                              = 0,0,2,2

td                  Element      d
.datepickerDisabled Class        c
:hover              Pseudo-class c
                              = 0,0,2,1

If you do not understand this format, read http://www.w3.org/TR/CSS21/cascade.html#specificity:

A selector's specificity is calculated as follows:

• count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d) The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

If you prefer a picture ^source: