I have a situation where I need to maintain 3 different styles in a patterned design without altering the classes on the HTML side. I have been attempting to achieve this using nth-child selectors. However, I am facing an issue where my first class is being overridden by my odd class. I even tried changing it to nth-child(2n+3), but that didn't work either. How can I ensure that my first child div retains its background image?
/* Styling for Even Featured Items */
.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;
}
/* Styling for Odd Featured Items */
.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;
}
/* Styling for First Featured Item */
.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;
}
Now let's take a look at the HTML structure:
<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>