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?
