How do I prevent my style from being overridden another style on a surrounding div?

Question

It seems elementary, but here is problem.

Stylesheet like so:

#Content h1, #Content h2, #Content h3, #Content h4, #Content h5, #Content h6 {   color: #405679; }  h3#issueHeader {   color: blue; } 

HTML like so:

<div id="Content">   <h3 id="issueHeader">In This Issue:</h3> </div> 

Instead of my issueHeader selector overriding the Content selector like I would expect, Firebug and my eyeballs show me that the color is inherited from the div, and the issueHeader selector is overridden. Hunh?

Answer 1

You can throw the !important attribute on h3#issueHeader to force the browser to use that style

h3#issueHeader {   color: blue !important; } 

However, it is only partially supported in IE6

---

Additionally, this should only be used as a last resort to the other solutions purposed. This is because if users of your website want to override your style, important becomes a useful tool for that.

Answer 2

CSS gives more weight to styles with more specific selectors. So if you want #Content h3 not to override h3#issueHeader, give it another selector: e.g. #Content h3#issueHeader

If your h1...hx elements are meant to be generally #405679, set them to that without the #Content selector. Then override them with a more specific selector when you need to.

However, because the way weight is calculated, we need to use closest element/class in our selector to get enough-weight, for example:

• Consider we want to style "z" element.
• But our style is overridden by "y z" selector (without quotes).
• Even if our selector is more specific:
  • Starting from "a b c" all the way to "u v w" (without x).
  • We can't get more wight than "y z".
  • But "x y z" selector will have enough weight (as x-tagged-element is parent of y-tagged-element).