nth child overriding first child - html

Question

I have 3 styles I need in a repeating design without changing the classes on the HTML side. I've been trying to accomplish this with nth-child selectors. The first class needs to have a different background image than the even and odd classes. My odd class keeps keeps overriding my first child class. I tried changing it to nth-child(2n+3), but no luck either.
How can I get my first child div to keep its background image?
/* Even Featured */
.home-feature-container:nth-child(even)
{
background-color:#393939;
padding-bottom: 20px;
}
.home-feature-container:nth-child(even) .home-featured-left
{
width:50%;
display:inline-block;
background-image: url('/images/featured-top-gray.png');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
vertical-align: top;
}
.home-feature-container:nth-child(even) .home-featured-right
{
width:50%;
display:inline-block;
background-image: url('/images/featured-top-spacer-gray.png');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
vertical-align: top;
}
/* Odd Featured */
.home-feature-container:nth-child(2n+3)
{
background-color:#252424;
padding-bottom: 20px;
}
.home-feature-container:nth-child(2n+3) .home-featured-left
{
width:50%;
display:inline-block;
background-image: url('/images/featured-top-black.png');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
vertical-align: top;
}
.home-feature-container:nth-child(2n+3) .home-featured-right
{
width:50%;
display:inline-block;
background-image: url('/images/featured-top-spacer-black.png');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
vertical-align: top;
}
/* First Featured */
.home-feature-container:first-child
{
background-color:#252424;
padding-bottom: 20px;
}
.home-feature-container:first-child .home-featured-left
{
width:50%;
display:inline-block;
background-image: url('/images/featured-top-first.png');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
vertical-align: top;
}
.home-feature-container:first-child .home-featured-right
{
width:50%;
display:inline-block;
background-image: url('/images/featured-top-spacer-first.png');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
vertical-align: top;
}
And the HTML
<div class="div_wrapper home-feature-container">
<div class="home-featured-left">
<div class="home-featured-left-content">
<h3 class="title">Feature</h3>
<h3>Sed tincidunt purus</h3>
<div class="home-featured-copy">Eu lectus varius auctor. Integer et elit bibendum, fermentum velit a, aliquam est. Donec varius arcu rutrum lorem ultrices, et tristique leo pretium. Nam porttitor lacinia nunc, sit amet maximus justo placerat ac. Curabitur ut tellus sed nisi faucibus.
</div>
</div>
</div><div class="home-featured-right">
<div class="home-featured-right-content"><img src="/images/featured-image-home.jpg" class="home-featured-image" /></div>
</div>
</div>

Answer 1

If I am understanding the question properly, the selectors are not selecting anything in your html, you need to select the children of the home-feature-container div.
I used the wildcard (*) for simplicity, see this fiddle
Your HTML:
<div class="div_wrapper home-feature-container">
<div class="home-featured-left">
<div class="home-featured-left-content">
<h3 class="title">Feature</h3>
<h3>Sed tincidunt purus</h3>
<div class="home-featured-copy">Eu lectus varius auctor. Integer et elit bibendum, fermentum velit a, aliquam est. Donec varius arcu rutrum lorem ultrices, et tristique leo pretium. Nam porttitor lacinia nunc, sit amet maximus justo placerat ac. Curabitur ut tellus sed nisi faucibus.
</div>
</div>
</div><div class="home-featured-right">
<div class="home-featured-right-content"><img src="/images/featured-image-home.jpg" class="home-featured-image" /></div>
</div>
</div>
Modified CSS:
/* Even Featured */
.home-feature-container *:nth-child(even)
{
background-color:#393939;
padding-bottom: 20px;
}
.home-feature-container *:nth-child(even) .home-featured-left
{
width:50%;
display:inline-block;
background-image: url('/images/featured-top-gray.png');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
vertical-align: top;
}
.home-feature-container *:nth-child(even) .home-featured-right
{
width:50%;
display:inline-block;
background-image: url('/images/featured-top-spacer-gray.png');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
vertical-align: top;
}
/* Odd Featured */
.home-feature-container *:nth-child(2n+3)
{
background-color:#252424;
padding-bottom: 20px;
}