How to write a CSS nth-child equation

Today we are going to talk about the CSS pseudo selected “nth:child”. It’s my new favorite thing.

We are lucky enough to have two clients right now that have asked us to work in HTML5 and CSS3 and they don’t care one whit that (as one client put it), “my grandma can’t see the site on her old computer running IE 6″. So we’ve opened up the firehose and pushed ourselves to implement some new CSS tricks.

What we use nth child for

Since we commit exclusively to tables-less CSS and a 960 grid layout we use nth child a lot to float elements into columns – if you float three across with a margin-right of 20px, you need to remove the third margin so your widths come out properly:

We also use it for table rows when displaying a lot of data:

How to Figure Out the Equations

I’ve been roundly mocked by my family for my issues with basic math. Somehow I have a degree from the University of Utah and have always excelled at my classes, yet I cannot do long division (and I have a father who is a financial examiner and a sister going through vet school). Thusly I could not wrap my head around the equations for nth-child. I read a great article from How nth-child Works by CSS Tricks and that helped, but it was time to pull in the big guns. I called on my friend Mike Carey (aka Homeschool) to help me out. Mike has a particular gift when it comes to explaining difficult concepts to people.

Mike explained that you need to find and apply the pattern and the start point.

If you want the seventh item to be different then you can just number it (7):

if you want the 7th, 14th and 21st then you know it’s the seventh item starting with number 7, which is written (7n+7). This made no sense to me.

So Mike broke it down more.

You are looking for two things, the pattern AND where you want the pattern to start. The first part is the pattern. The second part is where it starts.

So then if you want:

Every 5th item to be different, starting with the #5, you write: (5n+5)

Every item starting with the 3rd to be different, you write (n+3)

Every second item starting with the 6th, you write (2n+6)

Practical Examples

Besides the couple of examples we started with we used this heavily in an application we are developing that has a lot of information tables. They look like this:

This is achieved by saying the first column looks one way, the second another and the third another. You cannot specify columns in CSS (only table cells [td] and rows [tr]) so you have to do it based on every third cell:

td:nth-child(3n+1) {background:#CEE3F2; … }
td:nth-child(3n+2) {background:#E6F1F8;}
td:nth-child(3n+3) {background:#EDEDED … }

(the above examples have been truncated, view the code to see full styles)