title: CSS selector to select the first element after n elements
body: <p>Is there a way to select the first element with a some class after <code>n</code> elements? For example in the following HTML, I want to be able to select only the first <code>div</code> that has CSS class <code>apple</code> after the <code>5th</code> <code>div</code>, resulting in the <code>7th</code> <code>div</code> element being selected.</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="data-class"&gt;1&lt;/div&gt;
      &lt;div class="data-class"&gt;2&lt;/div&gt;
      &lt;div class="data-class"&gt;3&lt;/div&gt;
      &lt;div class="data-class apple"&gt;4&lt;/div&gt;
      &lt;div class="data-class"&gt;5&lt;/div&gt;
      &lt;div class="data-class"&gt;6&lt;/div&gt;
      &lt;div class="data-class apple"&gt;7&lt;/div&gt;
      &lt;div class="data-class apple"&gt;8&lt;/div&gt;
      &lt;div class="data-class"&gt;9&lt;/div&gt;
      &lt;div class="data-class apple"&gt;10&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This selector selects all the <code>div</code>s, but I only want the first: <code>.data-class.apple:nth-child(n+5)</code></p>
  
  <p>And this one doesn't even work: <code>.data-class.apple:nth-child(n+5):first-child</code></p>
  
  <p>I have put the HTML and CSS samples <a href="http://jsbin.com/xufoj/1/edit?html,css,js" rel="nofollow">here</a>.</p>
  
  <p><strong>UPDATE</strong><br>
  Current CSS selectors</p>
  
  <pre><code>.data-class{
    background-color: #0ea;
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #444;
  }
  
  .data-class:nth-child(n+5)+.apple{
    background-color: #f0f;
  }
  </code></pre>