Two CSS Classes: Which one Wins?

Question

The markup below aligns SAMPLE TEXT to the left.

To me, it seems like it should be aligned to the right. The class that aligns to the right is declared after the one that aligns left. And the class that aligns to the right is even referenced last. So why does the class that aligns to the left win?

CSS

.table {
    width: 100%;
}
.table td {
    text-align: left;
}
.cell {
    text-align: right;
}

HTML

<table class="table">
    <tr>
        <td class="cell">
             SAMPLE TEXT
        </td>
    </tr>
</table>​

Please see my jsFiddle Example.

Answer 1

The .table td selector has a higher specificity. CSS specificity rules are kind of weird... IDs weigh more than class names, which weigh more than tag names.

The specificity rules, in a nutshell:

• For each tag name, add 1.
• For each class name, add 10.
• For each ID, add 100.

The higher values will always override the lower ones. In the case of a tie, the last rule loaded wins.

Answer 2

I highly recommend reading the actual CSS specification on specificty.

There are four levels:

1. inline-styles, !important _(a)
2. IDs _(b)
3. classes, pseudo-classes, attribute selectors _(c)
4. element, pseudo-elements _(d)

For every selector, add one to it's respective letter category:

#foo.bar baz -> a=0, b=1, c=1, d=1
#fizz#buzz   -> a=0, b=2, c=0, d=0

a trumps b trumps c trumps d.

If there's a tie the second one wins:

#foo #bar baz
#fizz #buzz baz  <-- same specificity, this one wins