Add nth-child to your css toolkit
I have skimmed over nth-child (css) for the past few years, effectively ignoring it and boy was I silly for doing so. Picture this typical scenario:
I often have items in a list that are laid out horizontally and covering multiple rows. Until I discovered nth-child I was closing that list at the end of each row and starting a new list for each row so that I could control the margins and padding to ensure each item was correctly aligned.
Although this works it is very wasteful and assumes that all rows are different which isn’t always true. Then I stumbled across a tutorial by Trevor Davis who works at the amazing Viget. In a tutorial about css-transforms and diamonds I discovered he was using nth-child to change the margin for items that start on each row and it was this explanation that was my light-bulb moment with nth-child.
Over at Css-tricks where I could lose days learning new techniques they explain how nth-child works very well and I suggest you head over there now to see it in action.
I have just added nth-child to my base templates and implemented it for a current project for CUPP. On the Shop page I have used nth-child to space the 4th and 5th items so they can sit nicely between the row above.