Css style priority

Question

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

You should _avoid_ `!important` - see http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css — andyb, Aug 23 '12 at 09:05

score 16 · Accepted Answer · edited May 23 '17 at 11:54

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

@Raisch yes thanks. Spotted that, was just testing the correct selector locally :-) — andyb, Aug 23 '12 at 09:04

Raisch · Answer 2 · 2018-09-29T18:47:45.310

2

In this case the more detailed rule will get it.

Try this in your HTML:

<style type="text/css" media="screen, projection">
    tbody tr:nth-child(even) td,
    tbody tr:nth-child(even) tr,
    tbody tr:nth-child(even) th
    {
        background: Red;
    }
</style>

Best regards

edited Sep 29 '18 at 18:47

answered Aug 23 '12 at 09:00

Raisch

821
6
13

2

The code is misleading, because the part `,tr,th` has no impact and its role can easily be misunderstood. What matters here is the setting on certain `td` elements using sufficiently large specificity. – Jukka K. Korpela Aug 23 '12 at 09:49
@JukkaK.Korpela - I know, i just extended his own CSS block. :-) – Raisch Aug 23 '12 at 11:15
@JukkaK.Korpela updated my answer over 6 years later! :-) – Raisch Sep 29 '18 at 18:48

Css style priority

2 Answers2

Linked