title: CSS nth-child expression to avoid the last row with at most 3 elements
body: <p>I am creating lists that display in columns of three, every <code>&lt;li&gt;</code> has a <code>border-bottom</code> like so:</p>
  
  <pre><code>x | x | x
  ---------    
  x | x | x
  ---------      
  z | z | z
  ---------  
  
  &lt;ul&gt;
      &lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;
      &lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;
      &lt;li&gt;z&lt;/li&gt;&lt;li&gt;z&lt;/li&gt;&lt;li&gt;z&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What I wish to do is create an nth-child expression to remove the <code>border-bottom</code> on the last line of three, so for the above example that would be:</p>
  
  <pre><code>ul li:nth-child(-n+6) {
      border-bottom:0;
  }
  </code></pre>
  
  <p><strong>The Problem</strong></p>
  
  <p>However where it get's slightly more complicated is that the amount of items in the list varies so any of the following scenarios could come about:</p>
  
  <p><strong>Scenario 1</strong></p>
  
  <pre><code>x | x | x
  ---------   
  x | x | x
  ---------   
  z |
  ---  
  
  &lt;ul&gt;
      &lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;
      &lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;
      &lt;li&gt;z&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Scenario 2</strong></p>
  
  <pre><code>x | x | x
  ---------   
  x | x | x
  ---------   
  z | z |
  -------
  
  &lt;ul&gt;
      &lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;
      &lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;
      &lt;li&gt;z&lt;/li&gt;&lt;li&gt;z&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Scenario 3</strong></p>
  
  <pre><code>x | x | x
  ---------   
  z | z |
  -------
  
  &lt;ul&gt;
      &lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;&lt;li&gt;x&lt;/li&gt;
      &lt;li&gt;z&lt;/li&gt;&lt;li&gt;z&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Conclusion</strong></p>
  
  <p>My aim is to always remove the <code>border-bottom</code> on the last row (or in this example the character <strong>z</strong>) so that it does not have the style applied to it.</p>
  
  <p>An ideal soloution would be:</p>
  
  <pre><code>ul {
      padding-bottom:-20px;
  }
  </code></pre>
  
  <p>But <code>padding-bottom:-#px;</code> is not supported in CSS.</p>
  
  <p>The only other way I can think of to do this is to create an nth-child expression to capture only rows that include 3, that aren't the last line?</p>
  
  <p>I guess it may need some sort of division by 3 to look for the amount to apply it too?</p>