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?
- Rounded corners on container: setting a negative margin on list items in the top/bottom row leave the corners misaligned.
- Pixel perfection: using a negative margin on either the top/bottom borders of the list items sometimes shaves off a pixel, resulting in slight vertical-misalignments.
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:
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:
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:
- Select the last item, regardless of its position.
li:last-child - Select the next to last child, except when it’s in the rightmost column (where it’s not touching the bottom).
li:nth-last-child(2):not(:nth-child(xn)) - Select the third to last child, except when it’s in the two rightmost columns.
li:nth-last-child(3):not(:nth-child(xn)):not(:nth-child(xn-1)) - Select the fourth to last child, except when it’s in any column but the leftmost one.
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.
