Overriding tag styles within other styles

[Sonreir]

Hey all,

Quick question for you CSS gurus:

I've got a style for my h2 tags that looks like this:

h2 
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
color: #144A67;
font-size:12pt;
margin: 5px 0 0 0;
padding-bottom: 10px;
}

And I've got another class I'm using in my div tags to make the data appear to be in a highlighted blue box that works like so:

.infobox {
margin: 5px 0 12px 0;
width: auto;
padding: 10px 10px;
background: #ADD2D8;
text-align: left;
border: 1px solid #cbD4DB
}

Now my problem occurs when I want to use my h2 tag within my infobox div. I don't want the h2 tag to have the blue background from the infobox, but I don't want it to have the padding-bottom of 10px either. Anyway to make the h2 tag behave differently if it's located within the infobox class?

Thanks,
Matt

[vincevincevince]

Make an extra class:

.infobox h2 {background-color:white;}

Whatever you put in there will only apply to the h2 which is in the .infobox

[Sonreir]

Thanks. Did what you said, but I think I misunderstood my problem.
Gonna have to put my h2 tags outside my divs after all.

[Robin_reala]

I think vincevincevince has just left off your requested padding change. To elaborate on his example:

.infobox h2 {
background-color:white;
padding-bottom: 0;
}