CSS rule not being overridden

Question

I ran into a weird issue, where a CSS rule doesn't seem to be applied correctly on Safari/Chrome/Firefox on Mac.

Given the following html code:

<table id="table" border="1">
    <tr>
        <td id="cell">
            Hello
        </td>
    </tr>
</table>

Then the following css code works as I expected (as in the cell doesn't have padding on top):

td { padding: 10px; }
#cell { padding-top: 0px; }

But this one doesn't:

#table td { padding: 10px; }
#cell { padding-top: 0px; }

(Try it out online at: http://jsfiddle.net/xkduyk7m/)

I expected both versions of the CSS to yield the same effect in this case, but in the second case the rule that is added later and that applies to the specific cell doesn't override the first rule.

Why?

To fix this, just change your second example so #cell { padding-top: 0px !important; } — Alex P. Miller
– Alex P. Miller, Commented Sep 3, 2014 at 22:05
@alexpmil Never use !important unless you have no other way to solve a problem. — emerson.marini
– emerson.marini, Commented Sep 3, 2014 at 22:06

LcSalazar · Accepted Answer · 2014-09-03 22:07:03Z

4

Each css selector has a value "weight". The combination makes it override one another, and when they match, the order of writing will define the precedence.

Here are W3's docs about how to calculate the precedence: http://www.w3.org/TR/CSS2/cascade.html#specificity

answered Sep 3, 2014 at 22:07

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mathieu David · Accepted Answer · 2014-09-03 22:06:46Z

2

Css rules are not place bound. A more specific css selector will override another less specific. Place is only used in case they are both as specific.

In your case #table td is more specific than just #cell and thus is not being overridden. If you use #table #cell it should work

answered Sep 3, 2014 at 22:06

Mathieu David

5,3383 gold badges20 silver badges28 bronze badges

4 Comments

Samuel Over a year ago

Alright, I had a different idea about "specificity", as in id applies to just one element and is more specific than a selector that selects multiple elements.

Mathieu David Over a year ago

It is more often used with classes and I guess browsers used the same rules for classes and id's. And if you replace your example with classes you can directly see that a cell is less specific than a cell in a table. It's not always the most logical explanation that wins ;) It's something you learn by trial and error and a good source inspector helps a lot too! ;)

Samuel Over a year ago

With classes it indeed makes sense. Also the source inspector actually pointed me to the fact that the second rule was detected but not applied in favour of the first rule. If only it would tell you why yet!

Mathieu David Over a year ago

That is the trial and error part. Generally followed by a great sense of pride when you are able to resolve the issue! Even if in a lot of cases you shouldn't have made the error in the first place ;)

Evan · Accepted Answer · 2014-09-04 15:03:10Z

0

Your problem is that the #table td { padding:10px; } will wright out as #table td { padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; } by the browser. And this priority over your #cell { padding-top:0px; } . try one of the fallowing 2 options

Option 1

#table td { padding: 10px 10px 10px 10px; }
#table #cell { padding: 0px 10px 10px 10px; }

Option 2

#table td { padding: 10px; }
#table #cell { padding-top: 0px !important; }

Sorry for the bolding using stack overflow android app and the hash makes it bold sorry for that

edited Sep 4, 2014 at 15:03

answered Sep 3, 2014 at 22:18

Evan

53 bronze badges

Collectives™ on Stack Overflow

CSS rule not being overridden

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related