css: set font-weight

Question

Is it possible to set font-weight to normal without !important?

http://jsfiddle.net/DvBes/

<table id="tasks">
    <tr><td>Name</td><td>SomeTask</td></tr>
    <tr><td>Time</td><td class="gray">08/11/2011</td></tr>
</table>



table#tasks td:first-child+td {
    font-weight:bold;
}

.gray {
    color: gray;
    font-weight: normal !important;
}

Answer 1

Your first css rule is much more specific than the second, because of this it will overwrite the second one if you don't use !important.

You could achieve the same without !important by changing .gray to table#tasks td:first-child+td.gray

Answer 2

The following code would do the trick:

#tasks .gray {
    color: gray;
    font-weight: normal;
}

You need to learn a bit about selector specificity, here's a good article http://css-tricks.com/855-specifics-on-css-specificity/ on it.