css style overwrite order?

Question

Well i have 2 css includes

<link href="Styles/layout.css" rel="stylesheet" type="text/css" />
<link href="Styles/ATJournal.css" rel="stylesheet" type="text/css" />

layout.css

Table.infoBox tr td table tr td
{
    padding: 0px;
    border: 0px;
}

ATJournal.css

table.ATJMainTable tr td
{
    border: 1px solid black;
    padding: 3px;
}

and then we have this table

<Table class="infoBox">
    <tr>
        <td>
        <table class="ATJMainTable">
            <tr>
                <td>
                    some text!
                </td>
            </tr>
        </table>
    </tr>
</table>

Why does layout.css overwrite ATJournal.css in this case?

Even if i change the order of the css includes "layout.css" still overwrites ATJournal.css....

score 11 · Accepted Answer · answered May 11 '09 at 13:58

The selector is more specific.

Table.infoBox tr td table tr td

is styling td cells inside a table which is inside a table classed with infobox.

table.ATJMainTable tr td

is styling td cells inside a table classed with ATJMainTable

You could use !important to override the specificity, or you could do something like:

table.infoBox tr td table.ATJMainTable tr td

to specifically override that piece.

Alternatively, can you reduce the infobox selector to be less specific?

score 10 · Answer 2 · answered May 11 '09 at 13:52

10

You can actually specify which rule wins by using !important.

table.ATJMainTable tr td
{
    border: 1px solid black !important;
    padding: 3px !important;
}

This basically tells the browser, that it should make sure this rule is the most important rule and all others should be cascaded in favor of this rule.

warning: you will want to use this sparingly because it will cause issues if that are hard to track down if you use it too much.

answered May 11 '09 at 13:52

Nick Berardi

54,393
15
113
135

3

Are are better off trying to avoid using this syntax all together. its not bad to use it but if you can avoid it you should. – Matt Seymour Mar 26 '12 at 13:49
4

This is not an answer to the question. It might be a solution to the problem that inspired the question, but it's a poor one at that. – Jasper Feb 10 '13 at 11:12
@Jasper now a few years later when i have a greater understanding of css i changed the accepted answer as this answer is no the right way to solve the problem! – Peter Mar 06 '15 at 10:33
@Peter It's always good to see when people take responsibility for their questions from years ago. – Jasper Mar 06 '15 at 12:04

score 3 · Answer 3 · answered May 11 '09 at 13:49

3

it's a more specific selector.

See here.

answered May 11 '09 at 13:49

Zack Marrapese

12,072
9
51
69

css style overwrite order?

3 Answers3