title: How to select the first element of n>4 elements with CSS only?
body: <p>I'm playing around with <code>nth-child</code> selector.</p>
  
  <p>Say I have grid with rows of 4 elements each and my first and last element have classes of <code>ui-first-child</code> and <code>ui-last-child</code> respectively:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li.ui-first-child&gt;
   &lt;li&gt;
   &lt;li&gt;
   &lt;li.ui-last-child&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What I would like to do is select <strong>the first element ONLY if there are more than 4 elements</strong> using pure CSS.</p>
  
  <p>So if there are five elements like this:</p>
  
  <pre><code> &lt;el.first&gt;&lt;el&gt;&lt;el&gt;&lt;el&gt;
   &lt;el.last&gt;
  </code></pre>
  
  <p>I want to override bottom-corners on the first element.</p>
  
  <p><strong>Question:</strong><br>
  Is it possible with pure CSS/nth-child/first/last class to select the first element on a group of elements with number of elements > 4?</p>
  
  <p>Thanks!</p>