CSS override rules and specificity

css, html

Solution

To give the second rule higher specificity you can always use parts of the first rule. In this case I would add `table.rule1 tr`from rule one and add it to rule two.

table.rule1 tr td {
    background-color: #ff0000;
}

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

After a while I find this gets natural, but I know some people disagree. For those people I would suggest looking into LESS or SASS.

Problem

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 its 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. I tried adding 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. What do I need to do to tell CSS I want `rule2` to override `rule1` for the `td` element?

Original source