I'm often confused by CSS override rules: in general, I realize that more specific style-sheets override less specific ones, and that specificity is determined by how many selectors are specified. There's also the !important keyword, which plays a role as well.
So, here's a simple example: I have a table with two table cells. The table itself has a CSS rule which applies to all cells within the table. However, the second table cell has it's own rule which should override the general table rule:
<html>
<head>
<style type = "text/css">
table.rule1 tr td {
background-color: #ff0000;
}
td.rule2 {
background-color: #ffff00;
}
</style>
</head>
<body>
<table class = "rule1">
<tr>
<td>abc</td>
</tr>
<tr>
<td class = "rule2">abc</td>
</tr>
</table>
</body>
</html>
But... when I open this in a browser, I see that rule2 doesn't override rule1. Okay - so I guess I need to make rule2 more "specific", but I can't really define any further selectors since I just want to apply it to a particular table cell. So, I tried putting the ! important keyword, but that doesn't work either.
I'm able to override rule2 if I wrap the text node in a <div>, like:
<td class = "rule2"><div>abc</div></td>
...and then make the CSS rule more specific:
td.rule2 div {
background-color: #ffff00; !important
}
This works, but it's not exactly what I want. For one thing, I want to apply the rule to the table cell, not the DIV. It makes a difference because you can still see the background color of rule1 as a border around the div.
So, what do I need to do to tell CSS I want rule2 to override rule1 for the td element?
The important needs to be inside the ;
td.rule2 div { background-color: #ffff00 !important; }
in fact i believe this should override it
td.rule2 { background-color: #ffff00 !important; }
The specificity is calculated based on the amount of id, class and tag selectors in your rule. Id has the highest specificity, then class, then tag. Your first rule is now more specific than the second one, since they both have a class selector, but the first one also has two tag selectors.
To make the second one override the first one, you can make more specific by adding information of it's parents:
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
Here is a nice article for more information on selector precedence.
Source: Stackoverflow.com