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....

Answer 1

it's a more specific selector.

See here.

Answer 2

See This answer to a related question.

Answer 3

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.

Answer 4

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?