Question

I am creating lists that display in columns of three, every <li> has a border-bottom like so:

x | x | x
---------    
x | x | x
---------      
z | z | z
---------  

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li><li>z</li>
</ul>

What I wish to do is create an nth-child expression to remove the border-bottom on the last line of three, so for the above example that would be:

ul li:nth-child(-n+6) {
    border-bottom:0;
}

The Problem

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:

Scenario 1

x | x | x
---------   
x | x | x
---------   
z |
---  

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li>
</ul>

Scenario 2

x | x | x
---------   
x | x | x
---------   
z | z |
-------

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li>
</ul>

Scenario 3

x | x | x
---------   
z | z |
-------

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li>
</ul>

Conclusion

My aim is to always remove the border-bottom on the last row (or in this example the character z) so that it does not have the style applied to it.

An ideal soloution would be:

ul {
    padding-bottom:-20px;
}

But padding-bottom:-#px; is not supported in CSS.

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?

I guess it may need some sort of division by 3 to look for the amount to apply it too?

Answer 1

So far, I’ve created a selector that applies a style to the last row

/* all the cells */
li {
   background: #ccc;
}

/* last row, doesn't matter how many cells */
li:nth-last-child(-n + 3):nth-child(3n + 1), /* first element of the last row */
li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li /* all its following elements */
{
   /* reset the style, eg: */
   background: transparent;
}

You can see a live example here http://jsbin.com/ufosox/1/edit

Of course this doesn’t support IE8 and less.