.className h2 doesn't work but #idName h2 does

[dleal]

Hi all,

this is happening to me both in firefox and explorer, and that makes me think I'm doing something wrong. But it's strange. I have this code:

<div id="comments" class="section">
  <h2>A Title</h2>
  
  <p>Text here.</p>
</div>

The following CSS puts the h2 near the top of the div, as I intend.

#comments {
  border-top: 5px solid #ec9206;
}

#comments h2 {
  margin: 0.1em 0 0.5em;
}

However, since there are more places where I want to do this, I decided to create a new class (section):

div.section {
  border-top: 5px solid #ec9206;
}

div.section h2 {
  margin: 0.1em 0 0.5em;
}

The margin-top setting does not work here (the other ones do). I could achieve what I want by setting line-height to 0, but this is an ugly, ugly hack.

CSS and HTML validate in both cases.

Any ideas about what I am doing wrong?

Cheers,

David

[Dan Schulz]

Hi David, and welcome to Sitepoint. Any chance you can provide the full HTML and CSS code? I think I know of a way to do this without the need for the class declaration, but I want to make sure it'll work with your setup first before I recommend it.

[dleal]

Sorry for the post guys, I discovered the problem: An id selector is more specific than a class selector, and I had h2 overriden using the id of a parent div.

#main h2 {
  margin-top: 0.5em
}

Stupid me.

Cheers,

David

[dleal]

Dan, thanks for your reply. You can see the site at http://www.marketing-otaku.com (it's portuguese).

Cheers,

David