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

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).