HTML5 / CSS issue

Maybe I'm just not seeing but I have an H2 tag that is taking on the properties of a parent outside the parent that I want it to follow. Does that make sense? Here's what I mean. Look at the CSS:

#featured-products h2 {
    background: url(/clients/kettle-pizza/images/featured-products-bg.png) repeat-x;
    color: #ffffff;
    font-family: arial, helvetica, sans-serif;
    font-size: 18px;
    hight: 32px;
    line-height: 32px;
    padding-left: 25px;
    margin-top: -5px;
}

and then:

.featured h2{ 
    font开发者_开发知识库-family:arial, helvetica, sans-serif;
    color: #181d1f;
    font-size: 20px; 
    background:none;
    margin: 0;
}

when I use the H2 with the featured class the style form the featured-products gets used instead. Here's the code for the index page

<div id="featured-products" class="container_12">
 <h2>featured products</h2>
 <div class="featured grid_4">
 <img src="/clients/kettle-pizza/images/kettle-pic.png" alt="Kettle-Pizza">
 <h2>22.5” Basic Kit</h2>
 <p>Text removed ....</p>
 </div>
 <div class="featured grid_4">
 <img src="/clients/kettle-pizza/images/kettle-pic.png" alt="Kettle-Pizza">
 <h2>22.5” Basic Kit</h2>
 <p>Text removed ....</p>
 </div>

any idea what I'm doing wrong? Here's the page if you want a visual. The 22.5" headings should not have a background http://northshorewebdesign.net/clients/kettle-pizza/

---

There's a set of rules that governs specificity of CSS selectors. It should suffice to say that your #featured-products h2 selector carries more weight than the .featured h2 selector does, so the latter is being overridden by the former:

You can solve this in a number of ways, and the typical way to solve an issue of this kind is by making the latter rule more specific:

#featured-products .featured h2 {
  ...
} 

In your case, though, this can be solved more simply and in a way that is more performant: use the direct descendent selector (>) on the first selector to avoid targeting the more-deeply nested element:

#featured-products > h2 {
  ...
}

Lastly, if changing your selectors was going to introduce a lot of problems for your stylesheet, you could use the !important declaration to prevent the more specific selectors properties from overriding one or more less-specific properties:

.featured h2 {
  background: white !important;
}

---

The problem is that the id-based rule is more specific than the class-based rule, and hence takes precedence. You need to make the class-based rule more specific, eg.:

#featured-products .featured h2 { 
    ...

See http://jsfiddle.net/ehuPG/ for a simplified working example.

---

Even better - throw away all yer current code, and code it up right:

http://jsfiddle.net/c6GnH

here is the html:

<div id="featured-products" class="container_12">
    <h2>featured products</h2>
    <ul>
        <li>
            <img src="http://northshorewebdesign.net/clients/kettle-pizza/images/kettle-pic.png" alt="Kettle-Pizza">
            <span>22.5" Basic Kit</span>
            <p>The Basic kit for 22.5includes USA made with 304 grade stainless steel KettlePizza insert, hi-temp thermometer, realwood handles w/ stainless hardware and a 15" aluminum pizza pan.</p>
        </li>
        <li>
            <img src="http://northshorewebdesign.net/clients/kettle-pizza/images/kettle-pic.png" alt="Kettle-Pizza">
            <span>22.5" Basic Kit</span>
            <p>The Basic kit for 22.5includes USA made with 304 grade stainless steel KettlePizza insert, hi-temp thermometer, realwood handles w/ stainless hardware and a 15" aluminum pizza pan.</p>
        </li>
        <li>
            <img src="http://northshorewebdesign.net/clients/kettle-pizza/images/kettle-pic.png" alt="Kettle-Pizza">
            <span>22.5" Basic Kit</span>
            <p>The Basic kit for 22.5includes USA made with 304 grade stainless steel KettlePizza insert, hi-temp thermometer, realwood handles w/ stainless hardware and a 15" aluminum pizza pan.</p>
        </li>
    </ul>
</div>

here is the css:

#featured-products {
border:1px solid #bc4314;
width:958px;
display:block;
height:371px;
}

#featured-products h2 {
background: url(http://northshorewebdesign.net/clients/kettle-pizza/images/featured-products-bg.png) repeat-x scroll 0 0 transparent;
    color: #FFFFFF;
    font-family: arial,helvetica,sans-serif;
    font-size: 18px;
    line-height: 32px;
    margin-top: -5px;
    padding-left: 25px;
text-transform:uppercase;
}

#featured-products ul {
display:bock;
margin:0px;
padding:0px;
float:left;
width:956px;
list-style-type:none;
}
#featured-products ul li {
display:bock;
margin:0px;
padding:0px;
float:left;
width:290px;
padding: 20px 10px 10px 10px;
text-align:center;
list-style-type:none;
}
#featured-products ul li img {
border:2px solid #f19720;
margin-bottom:10px;
}
#featured-products ul li span{
display:block;
clear:both;
font-weight:bold;
color: #181D1F;
font-size: 20px;
margin-bottom:8px;
}
#featured-products ul li p{
text-align:left;
padding:0px 10px 10px 10px;
color: #181D1F;
font-size: 13px;
line-height: 22px;
}

This is much cleaner, and easier to read. Let me know if you have any questions, and gladly answer what i did.