Home/ Questions/Q 8145965
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T13:50:07+00:00

I’m often confused by CSS override rules: in general, I realize that more specific

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To give the second rule higher specificity you can always use parts of the first rule. In this case I would add table.rule1 trfrom 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.

    • 0