CODEWITHSUNDEEP
css
johnny
johnny

Reputation: 1251

css: set font-weight

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;
}

Upvotes: 4

Views: 2372

Answers (4)

Spadar Shut
Spadar Shut

Reputation: 15827

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.

Upvotes: 2

Kokos
Kokos

Reputation: 9121

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

Upvotes: 4

andyb
andyb

Reputation: 43823

Yes, give it greater specificity

table#tasks tr td.gray

Upvotes: 1

Joe
Joe

Reputation: 82654

If you change your CSS:

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

to

table#tasks td:first-child+td.gray, .gray {
    color: gray;
    font-weight: normal;
}

Upvotes: 1

Related Questions