breaking inheritance

[jcombs_31]

I guess this has never become a huge issue with me, but something I can't seem to get around.

 

If I set an element such as a paragraph

 

p {
  padding: 0;
}

 

and later decide I need a class to have some padding on the left

 

.padded {
  padding: 0 0 0 20px;
}

 

and then in my markup

 

<p class="padded">This padding is ignored based on my first padding</p>

 

How do I get around this?

[haku]

p.padded.

 

Although .padded will take precedence over the p, so what you are saying doesn't really make sense.

 

Anyways, you can read this for more info: http://htmldog.com/guides/cssadvanced/specificity/

[jcombs_31]

I guess I should have included that I did try it that way as well with the same results. I had to actually put something like this

 

#container .padded {
xxx
}

 

and it works.

[dbrimlow]

Actually, you are better off with:

 

#container p.padded {
xxx
}

 

In your specific instance, you only want to target certain paragraphs within the parent container by assigning them the padded class.

 

 

[jcombs_31]

well, depends, say I want to add that padding to another element your example wouldn't work very well.

[ToonMariner]

@jcombs download firebug (why is the FireFox3 release not finished!!!!) and you can see which rules are being applied to your markup very easily.

 

It is actuall better to just have #container .padded in fact its better to have the minimum amount of code possible whether it be css, xhtml or php!!!

 

reducing mass makes your projects much more maintainable..

[haku]

if .padded and/or p.padded isn't taking precedence over p, then you have a different CSS declaration that has the padding set to zero that is overpowering them. Both of the declarations are stronger than p alone.

 

Using firebug will show you which declaration is the strongest, and you can see where t hat declaration is coming from.