Take the 2-minute tour ×

My webpage contains:

<style type="text/css">
td {

The referenced stylesheet contains:

.rightColumn * {margin: 0; padding: 0;}

I have a table in the rightcolumn ID where I want the cells to have a little padding. However, the referenced stylesheet is taking precedence over the inline styling. I see this visually and also via Firebug. If I turn off the padding:0 instruction in Firebug, the padding-left takes effect.

How can I get the padding-left to work?

share|improve this question

7 Answers 7

up vote 16 down vote accepted

As others have mentioned, you have a specificity problem. When determining which of two rules should take precedence, the CSS engine counts the number of #ids in each selector. If one has more than the other, it's used. Otherwise, it continues comparing .classes and tags in the same way. Here, you have a class on the stylesheet rule, but not on the inline rule, so the stylesheet takes precedence.

You can override this with !important, but that's an awfully big hammer to be using here. You're better off improving the specificity of your inline rule. Based on your description, it sounds like your .rightColumn element either is or contains a table and you'd like the cells in that table to have extra spacing? If so, the selector you're looking for is ".rightColumn td", which is more specific than the stylesheet rule and will take precedence.

share|improve this answer
!important is to css as DoEvents is to VB6. :) –  BobRodes Sep 6 '12 at 17:56

Most of the answers are correct in saying that this is a specificity problem but are incorrect or incomplete in explaining the specificity rules.

Basically in your case .rightColoumn * is "more specific" than td and so that rule wins even though it comes earlier.

The CSS 2.1 rules are located here. These rules are:



So in your case you have two rules:

.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */

0001 is lower than 0010 and thus the first rule wins.

There are two ways to fix this:

  1. Use !important to make a rule more "important". I'd avoid doing this because it is confusing when you have lots of rules spread out over several files.
  2. Use a higher-specifity selector for the td you want to modify. You can add a class name to it or an id and this will allow you to supersede the rule from the linked CSS file.


  .rightColomn * { padding: 0; } /* 0010 */
  td#myUnpaddedTable { padding: 10px; } /* 0101 */
  td.anUnpaddedTable { padding: 10px; } /* 0011 */ 

Edit: Fixed the specificity rules for *. David's comment prompted me to re-read the spec, which does show that the * selector contributes nothing to the specificity score.

share|improve this answer
I concur. Based on the W3C page, though, I don't think that the star selector counts towards d-level (or any-level) specificity, so .rightColumn * should score 0010. I'd also recommend .rightColumn td {} as way to set the padding; it yields a good-enough score of 0011. –  David Kolar Mar 20 '09 at 19:39
@David Kolar: Thanks, fixed. –  Mr. Shiny and New 安宇 Mar 20 '09 at 21:08
Can you explain how .rightColumn belongs under "other attributes and pseudo-classes"? I guess the reason is that inline, a class is represented using the HTML attribute class. –  LarsH Jan 30 '12 at 11:18
In other words, div.value and is shorthand for div[class~=value]. –  LarsH Jan 30 '12 at 11:25
@LarsH: yes, it seems that [class~=value] has the same specificity as .value. But note that [id=idvalue] has a lower specificity than #idvalue –  Mr. Shiny and New 安宇 Jan 30 '12 at 22:03

The easiest way to get it to work is to add "!important" to CSS to guarantee its precedence (unless you've got multiple !important rules):

td {
    padding-left: 10px !important;

If you're looking for an answer without !important, you should read into CSS specificity specifications. The linked site has a good explanation of how it works, though basically it goes from most important to least, with id selectors most important, class selectors second, and element selectors third.

share|improve this answer
Watch out when using !important. It will increase maintenance problems if you have other people working with the code that aren't familiar with your usage of the !important rule. –  Rahul Mar 20 '09 at 18:22
Not to mention it breaks precedence which is confusing if you are looking at a rule that ought to be applied but isn't. –  Andrew Hare Mar 20 '09 at 18:25
I agree that !important should be used sparingly, but I find it similarly problematic when someone starts over-complicating their selectors just so they are more specific. For this example, it'd be td.rightColumn * { ... }, which is a horrific change to an otherwise simple selector. –  Daniel Lew Mar 20 '09 at 18:44

Try this instead:

td.rightColumn * {margin: 0; padding: 0;}

The td in the external stylesheet is more specific so it wins out. If you qualify the rightColumn class with an element name then the page-level styles will be applied.

share|improve this answer

You could try adding the ! important flag to your inline css.


td { padding-left:10px ! important; }

Also, for general rules on css rule ordering, have a look at this :


share|improve this answer
Wow, this was my first question posted to StackOverflow. I thank you all for your responses. They made me think more deeply about the issue. –  user80603 Mar 20 '09 at 20:31

Do this:

.rightColumn *,
td.rightColumn * {
  margin: 0;
  padding: 0;

Precedence in CSS is as follows:

  • If some rule has an ID, then it will precede anything else.
  • If some rule has a class attribute, it will precede tag-only rules.
  • If two rules have both IDs or tags, then the number of them untie the "fight".


<style type="text/css">
    padding: 10px;

    padding: 20px;
<div id="myid" class="class"></div>

Although your div has both ID and a class, the ID rule will override the .class rule.

To read more about CSS rules priorities, I'd recommend http://www.w3.org/TR/CSS2/cascade.html#specificity.

share|improve this answer

ok i admit i'm kind of late to the game here.. but 3 years on i guess i can still shoot for that first place answer..

the extra sauce in my answer is that there's an exmaple of css with 2 levels of class name..

in the below example you can see the 'td' with no class gets the ".interval td" style and the td with "indragover" class gets the "table.interval td.indragover" style..

(this code comes is for html drag and drop so there's some javascript applying the 'indragover' class to the td in dragenter, dragleave events)

// put this in a css file
.interval {
    height: 100%;
    width: 100%;
    background: #FFFFCC;
    border: 2px solid #000000;
    border-collapse: collapse;

table.interval tr td {
    border: 2px solid black;
    background: #FFFFCC;
    height: 20px;

table.interval td.indragover {
    background: #AAAA00;

// put this in a html file
<table class="interval">
<tr><td>blah</td><td class="indragover">blah</td></tr>
<tr><td class="indragover">blah</td><td>blah</td></tr>
share|improve this answer
Using two class names is just adding more rules to the selector which increases the specificity. You can also achieve the same result by adding more elements or by using an ID in there somewhere. –  Mr. Shiny and New 安宇 Jun 18 '12 at 13:16

Your Answer


