Friday 20 July 2012

Understanding nth-of-type

The Problem

:nth-of-type is a css pseudo class that was introduced into the CSS3 selectors specification. It’s a powerful weapon in the war against superfluous class names and loops infested with if statements that target every nth element. :nth-of-type can put an end to such insanity and solves the problem once and for all (as long as you’re ok without IE6,7 or 8 support), which is nice

Understanding the arguments

There are three key things to understanding how the arguments work.

1 – Groups of things

When you see something like 4n+2, 2n+4, 6n or 9n+3 start thinking of the 4n, 2n, 6n or 9n as groups of things –

  • 4n + 2: think groups of four things.
  • 2n + 4: think groups of two things.
  • 6n : think groups of six things.
  • 9n + 3: when you see 9n, think groups of nine things.

2 – The offset

With 4n+2, 2n+4, 6n or 9n+3 think of the number after the groups of things as the offset. If no offset value is given (e.g. 6n then a value of zero is used) –

  • 4n + 2: groups of four things with an offset of two.
  • 2n + 4: groups of two things with an offset of four.
  • 6n: groups of six things with an offset of zero.
  • 9n + 3: groups of nine things with an offset of three.

3 – The hidden minus one

The nth-of-type of specification states that a value of -1 is applied to the value for the offset. This is the final piece of the puzzle so when we see the following we know it means –

  • 4n + 2: groups of four things with an offset of two minus one.
  • 2n + 4: groups of two things with an offset of four minus one.
  • 6n: groups of six things with an offset of zero minus one.
  • 9n + 3: groups of nine things with an offset of three minus one.

Putting it together

Putting this all together we can now resolve the equation.

  • 4n + 2 resolves to groups of four with an offset of one.
  • 2n + 4: resolves to groups of two things with an offset of three.
  • 6n: resolves to groups of two things with an offset of minus 1.
  • 9n + 3: resolves to groups of nine things with an offset of two.

4n+2

It’ll break things down into groups of four (A,B,C,D), (E,F,G,H) etc and then offset the selected from the first item in the group.

So 4n+2 (remember it resolves to 4n+2-1, which is 4n+3) will select B, F, J, N, R, V & Z.

   

2n+4

It’ll break things down into groups of two (A,B), (C,D) etc and just like above it’ll offset the selected from the first item in the group. In this example though the offset is larger than the groups of things. So we won’t get any selections until the second group (C,D).

So 2n+4 (remember it resolves to 2n+4-1, which is 2n+3) will select C, E, F, H, J, L, N, P, R, T ,V, X & Z.

6n

As with the others, it’ll break it down into groups, in this case 6, and then offset the select elements from the first element in the group.

So 6n (remember it resolves to 6n+0-1, which is 6n-1) will select F, L, R & X.

There’s an interesting thing happening above and it’s to do with the first selection in the first group (A,B,C,D,E,F). Following the logic I’ve presented so far we go to the first item in the group ( in this case A) and then select the element that falls on the offset. However, there is no element before A so there is nothing to select. This is tripped me up, so if you don’t understand what’s being said in the paragraph you can safely ignore it. If you do understand it then you’ve likely been wondering where the first selection went!.

9n+3

Our final example is broken down into groups of nine and the offset is 3-1 which equals 2. So it’ll go to the first element in each group and count two along and select element on the second count.

So 9n+3 (remember it resolves to 9n+3-1, which is 9n-2) will select C, L & U.

Odd & Even Revisited

By now you should be getting enough of an idea as to how :nth-of-type works so let’s look at how to do odd and even without using the keywords.

2n is the equivalent of even. This is because it 2n is fully expressed as 2n+0-1 which resolves to 2n-1. So we now that it’ll select groups of two (A,B), (C,D) but the effect of negative offset will be that it’ll select the last element from previous group.

By using your powerful mind, or by process of deduction you can conclude that odd is the same as 2n+1. Fully expressed as 2n+1-1 this resolves to 2n+0 so it’ll select the first item in each group because there is no offset.

The End

I hope this helped you understand what’s going on. At first it’s a bit of brain bender, but once you wrap your head around then it’s not that crazy. I would genuinely like to know why that -1 is in the :nth-of-type specification, what purpose does it serve? If you know, leave a comment.