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

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?