Menu
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;
}
404
Values defined as Important will have the highest priority. Inline CSS has a higher priority than embedded and external CSS. So the final order is: Value defined as Important > Inline >id nesting > id > class nesting > class > tag nesting > tag.
html. Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page.
The location order of precedence is: browser default rules, external style sheet rules, embedded styles, and inline style rules. Specific rules take precedent over more general rules. Also, the rules toward the end of a style sheet take precedence over the front rules.
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;
}
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
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
