title: nth child overriding first child
body: <p>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? </p>
  
  <pre><code>/* 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;
  }  
  </code></pre>
  
  <p>And the HTML</p>
  
  <pre><code>    &lt;div class="div_wrapper home-feature-container"&gt;
          &lt;div class="home-featured-left"&gt;
              &lt;div class="home-featured-left-content"&gt;
              &lt;h3 class="title"&gt;Feature&lt;/h3&gt;
              &lt;h3&gt;Sed tincidunt purus&lt;/h3&gt;
              &lt;div class="home-featured-copy"&gt;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.
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;div class="home-featured-right"&gt;
              &lt;div class="home-featured-right-content"&gt;&lt;img src="/images/featured-image-home.jpg" class="home-featured-image" /&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>