2

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.667em;
   margin-bottom: -1.667em;
}

and my HTML:

<ul class="content-message">
    <li>xx</li>
</ul>

When I check I can see that the ul is getting its style from the the first CSS and it has a margin-bottom of 0. Can someone explain why this is. Also is there a way that I could fix this.

  • 1
    The `ul` should definitely get its `margin-bottom` from its inline `style`. Can you post a fiddle showing otherwise? – John Dvorak Nov 30 '12 at 08:52
  • Remove the inline style from your html and add `ul` before the `.content-message`, like this: `ul.content-message` http://jsfiddle.net/lollero/LLGM8/ – Joonas Nov 30 '12 at 08:58
  • 1
    Anyways, the second rule overrides the first rule, but the inline style rules them all. – John Dvorak Nov 30 '12 at 08:59
  • 1
    So there isn't an inline style in the first place? That changes everything. – BoltClock Nov 30 '12 at 09:33

3 Answers3

2

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.

Maloric
  • 5,525
  • 3
  • 31
  • 46
0

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.

Shiridish
  • 4,942
  • 5
  • 33
  • 64
-1

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

shanoj.ks
  • 1
  • This is *never* a good answer. http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – Stephan Muller Nov 30 '12 at 09:10