11

So, this is what I'm doing:

#id-form td {
padding: 0 0 10px 0;
}

#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px;
}

I have a table #id-form, on which I set all tds to have padding-bottom: 10px.
But on one special occasion, I want a particular td to have padding: 10px in all directions, which I set in the #particular-td.

Obviously, I put the CSS styling in sequence in an external file.
But the rendered CSS only has padding-bottom, and padding: 10px appears to be overridden!?

Please explain:
How and why is this happening?
How should I arrange these rules to solve my problem (other than inline styling)?

EDIT: I removed 'table' before #id-form in table. I was never using this, I just mentioned it here to be able to explain it better.

Improve this question
5
  • CSS isn't my strong point, however, if you want THAT particular CSS element to have a padding, why not put it in the 'style' of the element itself? That's sure to override all the other things. Commented Oct 8, 2012 at 11:11
  • @ATaylor inline CSS is not a manageable solution. Commented Oct 8, 2012 at 11:14
  • See CSS3 selectors: 9. Calculating a selector's specificity. Commented Oct 8, 2012 at 11:16
  • You don't need the table element selector before #id-form, as there can only be one element with #id-form in the page and the extra selector will slow it down ever so slightly. Just for future reference! :) Commented Oct 8, 2012 at 11:16
  • Edited the CSS, still doesn't work. Commented Oct 8, 2012 at 11:26

4 Answers 4

Reset to default
36

Because of CSS Specificity. A selector's weighting is evaluated based on the components that make it up, with id's given a weighting of 100, classes with a weighting of 10, and element selectors with weighting of 1.

So in your example:

table#id-form td

Has a weighting of 102 (table#id is 101 and td is 1), whereas this:

#particular-td

Has a weighting of 100. If you change your second to this:

#id-form #particular-td

You will get a weighting of 200 which will override the previous selector. Only as a last resort should you ever use !important, as this pretty much prevents you from overriding it further down the line.

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

2 Comments

Thanks bro. Thanks a lot. It has been a pain for me to understand this stuff earlier!
Adding to this: Inline-CSS always has the 'highest weight' unless you use !important
8

This has to do with specificity. table#id-form td is more specific than #particular-td. A rule with higher specificity has precedence over a rule with lower specificity.

Here are a few resources to get you started on understanding how it works:

About using !important, as suggested by others:

One might be tempted to use the !important keyword to sort this out, but that is rarely a good idea:

  1. It becomes a pain to maintain/troubleshoot
  2. It breaks the normal flow of CSS
  3. The rule cannot be overridden by other rules later on

It might take a few minutes to read up on specificity, but it will be well worth the time spent when you've got a grasp of it.

Improve this answer

3 Comments

+1 for encouraging further reading - before I understood specificity I used to spend countless hours bashing my head wondering why it didn't just "cascade" as I expected.
\+1 for the specificity calculator.
If you are stuck with !important spaghetti, note that one way !important properties can be overridden is with other !important properties when the ruleset that contains them has a higher specificity. Don't actually do this though!
2

You have two ways, either add !important after your padding for the particular-td:

padding: 10px !important;

OR, your selector altered like so:

table#id-form td#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px;
}

Both are fine. Personally I don't like the use of !important if I can avoid it.

Improve this answer

Comments

-1

Try this code, I have added !important to your css, in this mode can ovveride padding of table#id-form td

#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px !important;
}
Improve this answer

3 Comments

Would this work in IE as well? I have heard that this creates some problem with IE?
Using !important is not the way to go here. That should really be the solution of last resort.
I agree Christofer, plus here I'm trying to know the reason of this overriding, because no matter what, I can resort to inline styling at the end.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.