Why Does My Html Not Use The Last Style Defined In The Css?

I have the following CSS that's written in this order: h2:last-child, p:last-child, ul:last-child { margin-bottom: 0; } .content-message { margin: 20px -1.667em -1.667em -1.667

Solution 1:

It is done in order of specifity. In this case, ul:last-child is more specific because it has two conditions:

• It has to be a ul
• It has to be the last child

Whereas your second style only has one condition:

• It has to have the class content-message

In order to make the second style as specific as the first you need to add another condition:

ul.content-message {
   margin: 20px -1.667em -1.667em -1.667em;
   margin-bottom: -1.667em;
}

Because the two rules are equally as specific, the second rule takes precedence because it is written last. Note that this is a simplification of css specificity - the ordering works something like this:

1. Inline styles with !important
2. Stylesheet styles with !important
3. Inline styles without !important
4. Selectors containing an id (#myItem)
5. Classes, tag names, pseudo classes etc.

Any selector from higher up the list will take precedence, while two selectors from the same level will be determined by how many of that type there are (so two classes are less specific than an id, but as specific as a style and a tag). Two styles will the same weighting will defer to the last defined style.

I may be wrong on all items in point 5 having equal weighting, but for a better understanding check out http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html or similar articles found on Google.

Solution 2:

See this article that describes css specifity issues- http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Preference order-element selector < class selector < id selector

So specifying it as an Id attribute should work

#content-message {
   margin: 20px -1.667em -1.667em -1.667em;
   margin-bottom: -1.667em;

and <ul id="content-message">

Update- In your case irrespective of the above cases, you inline style- style="margin-bottom: -1.667em;" will override any other css. Surprised to see that doesn't happen with you.

Solution 3:

Please put a "!important" mark to which style you what to apply.