Why are my CSS properties being overridden/ignored?

Question

I\'m having some issues with the CSS \"hierarchy\" (not sure if it\'s proper to call it a hierarchy). I\'m trying to style the below bit of HTML.

Answer 1

Elements id have the priority in CSS since they are the most specific. You just have to use the id:

#content li.post-item > * {
  margin: 0px;
}

#content .item-description {
  color: #FFF;
}

#content .item-meta {
  color: #666;
}

Basically id have the priority on class which the priority on tags(p,li,ul, h1...). To override the rule, just make sure you have the priority ;)

Answer 2

My response should have been a "comment" on the answer, but I have the correct fix although #tibo answered correctly:

li.post-item > * {
  margin: 0px !important;
}

.item-description {
  color: #FFF !important;
}

.item-meta {
  color: #666 !important;
}

The !important rule will override the order of evaluation between id and class.

Here is a link to an article, When Using !important is The Right Choice, that will help you to understand... it made my life easier :)

Answer 3

The "hierarchy" in which CSS rules are measured is called specificity. Each part of a CSS rule has an actual numerical base-10 value. IDs are worth 100 while classes are only 10.

For more information see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

Better to follow the CSS standards. choose css selector and makeit under its parent then u may not to get conflicts when loading css fles (like .css files)

Answer 5

Targeting ID's is more specific than targeting classes. More specific styling will overwrite less specific styling. It should be noted that in-line styling in HTML is more specific and will therefore overwrite ID-targeted styling. In other words:

<p style="color:white" id="itemDescId" class="item-description">...</p>

With the CSS:

p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}

The text will appear white - not because it's closest to the html code, but because it's higher in the specificity hierarchy. If you remove the inline styling (and you normally should for cleaner more manageable code), then the text would become red. Remove the ID and it will be green. And finally it will be blue once the class is removed.

This is one of the more complex topics to understand in CSS, and I'm only scratching the surface, but the easiest description I've found on how CSS specificity works is over at CSS tricks:

http://css-tricks.com/specifics-on-css-specificity/