[ACCEPTED]-CSS precedence-css

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

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

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

• count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)

Concatenating the four numbers 9 a-b-c-d (in a number system with a large 8 base) gives the specificity.

So in your case 7 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 6 and thus the first rule wins.

There are two 5 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.

Example:

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

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

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

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

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

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

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

Try this instead:

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

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

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

e.g.

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

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

http://www.w3.org/TR/CSS2/cascade.html#specificity

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".

Example:

<style type="text/css">
  #myid{
    padding: 10px;
  }

  .class{
    padding: 20px;
  }
</style>
<div id="myid" class="class"></div>

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

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

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

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

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

(this 3 code comes is for html drag and drop so 2 there's some javascript applying the 'indragover' class 1 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;
    color:#112ABB;
    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>
</table>