Why doesn't my HTML use the latest style defined in CSS?

Question

I have the following CSS written in the following 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 see that ul gets its style from the first CSS, and it has margin-bottom of 0. Can someone explain why this is so. There is also a way I could fix this.

Answer 1

See this article for css specific issues - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Preference item session - class selector <id selector

Therefore, 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, regardless of the above cases, the built-in style is style="margin-bottom: -1.667em;" will override any other css. Surprised to see what is not happening to you.

Answer 2

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

• It must be ul
• He must be the last child

While your second style has only one condition:

• It must have a class content message.

To make the second style concrete, like the first, you need to add another condition:

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

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

• Built-in styles with! important
• Styles styles with! important
• Inline styles without importance
• ID Selectors (#myItem)
• Classes, tag names, pseudo-classes, etc.

Any selector from the list above will take precedence, while two selectors from the same level will be determined by how many of them exist (therefore, two classes are less specific than an identifier, but have a special character like style and tag). In two styles, the same weighting will apply to the last defined style.

Perhaps I am mistaken in all points of the fifth paragraph that have the same weighting, but for a better understanding check http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html or similar articles on Google.

Answer 3

Please put a “! Important” sign to which you must apply the style.