title: CSS First Child when 7 or more children
body: <p>So I have this query to get the <code>last-child</code> when there are 7 or more elements</p>
  
  <pre><code>li:nth-last-child(7) ~ li:last-child {
      background: red;
  }
  </code></pre>
  
  <p>This works for any number of elements as long as there is a minimum of <code>7</code>. What I want to do is the opposite, get the <code>first-child</code>.</p>
  
  <p>I tried the following</p>
  
  <pre><code>li:nth-last-child(7) ~ li:first-child {
      background: red;
  }
  </code></pre>
  
  <p>But that does not work. Strangely I can get the second child element using the following</p>
  
  <pre><code>li:nth-last-child(7) ~ li:nth-child(2) {
      background: red;
  }
  </code></pre>
  
  <p>I know this is pretty complex CSS, and may not even be possible, but I am wondering if it can be done. I'd rather not use JS if at all possible. I guess treat this as a challenge ;) </p>