Home/ Questions/Q 8429091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T05:14:17+00:00

I am having problems with CSS declaration priority. My page contains an external CSS

  • 0

I am having problems with CSS declaration priority. My page contains an external CSS file with a rule and some inline CSS declarations, which are supposed to override that rule. To my understanding inline style declarations should override external CSS declarations. However, when I view the page in Chrome the second row of the table is displayed blue, when it should be displayed red as defined in the internal style declarations.

What am I missing here

Here is the HTML:

<html>
<head>
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
    <style type="text/css">
        td,tr,th
        {
            background: Red;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>11</td>
            <td>22</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>bb</td>
        </tr>
    </table>
</body>
</html>

Here is the content of the CSS file:

tbody tr:nth-child(even) td,
tbody tr.even td
{
    background: #e5ecf9;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The number of selectors matters when calculating which rule has the highest specificity.

    Two excellent visualizations of CSS specificity are http://www.standardista.com/css3/css-specificity/ and http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

    You should avoid just sticking !important on the rule to override (see What are the implications of using "!important" in CSS?) and instead change the selector to give your rule more or equal weight to the imported rule.

    For example the following will make all cells background:red

    thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td {
    background:red;
}
    • 0