FOLLOW OUR BLOG

Via RSS

Search BLOG

How to write a CSS nth-child equation

April 26, 2011 | Written by Amber Sawaya

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:

.col:nth-child(3n+3) {margin-right:0;}
< view the code >

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

tr:nth-child(odd) {background:#CCC;}
< view the code >

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):

.box:nth-child(7) {background:#00AEEF;}
< view the code >

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)

.box:nth-child(5n+5) {background:#00AEEF;}
< view the code >

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

.box:nth-child(n+3) {background:#00AEEF;}
< view the code >

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

.box:nth-child(2n+6) {background:#00AEEF;}
< view the code >

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)

< view the code >
Thanks for your help, Mike!

Author 

Amber Sawaya is a creative director, best-selling author and business owner located in Salt Lake City, Utah. She designs and oversees projects for web, mobile and internal corporate tools and writes business books to help clients work better with designs and developers.

Categories: Tutorial / Download

Tags: , , , , ,

November 8, 2011 at 8:12 AM

Richard Bultitude commented:

Very nice. Just what I was looking for. Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>