CODEWITHSUNDEEP
htmlcsscss-selectors
Jargo
Jargo

Reputation: 365

Css style priority

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

Upvotes: 5

Views: 30743

Answers (2)

Raisch
Raisch

Reputation: 821

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

Upvotes: 2

andyb
andyb

Reputation: 43823

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

Upvotes: 16

Related Questions