Some creative nth-child()-ing. In a table-esque inline-block list, it will remove the extra line that results from needing both container and list item borders.
Why might this be useful?
For this example, I'll be using a 3-column layout using only inline-block list items. The three selectors used in combination to select the bottom row in all permutations are:
li:last-child
li:nth-last-child(2):not(:nth-child(3n))
li:nth-last-child(3):not(:nth-child(3n)):not(:nth-child(3n-1))
Here's a demo to illustrate how this works. The boxes in the corners are numbered based on which selector applies to them.
There's a pattern/strategy here. Let x be the total number of columns. All we have to do is figure out how to select each list item when it's on the bottom row, and deselect it when it's not. Let's try this with four columns:
li:last-child
li:nth-last-child(2):not(:nth-child(xn))
li:nth-last-child(3):not(:nth-child(xn)):not(:nth-child(xn-1))
li:nth-last-child(4):not(:nth-child(xn)):not(:nth-child(xn-1)):not(:nth-child(xn-2))
For additional columns, add another selector incrementing the nth-last-child()
parameter, and add another :not(:nth-child(xn-?))
, incrementing the ?.
Questions? Find me on Twitter and ask away! Or just view some working code on Dabblet.