Jergason Jergason - 24 days ago 15
CSS Question

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

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

css gives more weight to elements 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.

Comments