TL

Front-end dev playground

Tachun Lin

Sep 14, 2013

Something about nth-child selector

I think a lot of people already used nth-child, but do we miss something interesting about this pseudo-selector? Let us find it out togerther!

Simplest use:

The simplest usage of nth-child is to select a specified element, this is very useful when we need to apply some special style to a specified element.

ul li:nth-child(3) {  
  font-weight: bold;
  text-transform: uppercase;
}

result is like this:

| first | second | THIRD | fourth | fifth | sixth |

Even and odd element:

We can also use odd and even in nth-child directly:

// odd elements

ul li:nth-child(odd) {  
  font-weight: bold;
  text-transform: uppercase;
}

// even elements

ul li:nth-child(even) {
   font-weight: bold;
   text-transform: uppercase;
}

result:

// odd elements

| FIRST | second | THIRD | fourth | FIFTH | sixth |

// even elements

| first | SECOND | third | FOURTH | fifth | SIXTH |

What is "n" mean?

Now we take a look at the famous "n" equation in nth-child selector, "n" is starting at zero and then a set of all positive integers. For example, 2n is "2xn", it will select these elements:

  • 2*0 = 0 (nothing)
  • 2*1 = 2 (2ed element)
  • 2*2 = 4 (4th element)
  • 2*3 = 6 (6th element)
  • etc...

So if we use "2n" it will select every second element,q the result is just like "even".

ul li:nth-child(2n) {
   font-weight: bold;
   text-transform: uppercase;
}

result:

| first | SECOND | third | FOURTH | fifth | SIXTH |

How about "2n+1" or "3n-1"?

The equation of "2n+1" is "(2xn)+1", so it will select these elements:

  • (2*0)+1 = 1 (1st element)
  • (2*1)+1 = 3 (3th element)
  • (2*2)+1 = 5 (5th element)
  • (2*3)+1 = 7 (7th element)
  • etc...

We can also use "3n-1" which is mean "(3xn)-1", it will select these elements:

  • (3*0)-1 (nothing)
  • (3*1)-1 = 2 (2th element)
  • (3*2)-1 = 5 (5th element)
  • (3*3)-1 = 8 (8th element)
  • etc...

example:

// 2n+1 elements

ul li:nth-child(2n+1) {
   font-weight: bold;
   text-transform: uppercase;
}

// 3n-1 elements

ul li:nth-child(3n-1) {
   font-weight: bold;
   text-transform: uppercase;
}

result:

// 2n+1 elements

| FIRST | second | THIRD | fourth | FIFTH | sixth | SEVENTH |

// 3n-1 elements

| first | SECOND | third | fourth | FIFTH | sixth | SEVENTH |

Count backwards

We can also select an element count from last element by using "nth-last-child()" selector.

ul li:nth-last-child(3) {
   font-weight: bold;
   text-transform: uppercase;
}

result:

| first | second | third | fourth | FIFTH | sixth | seventh |

First n elements?

This is a little bit weird, maybe your first idea is "n+3" to get first three elements, but this is wrong, we need to use "-n+3" means from zero to third element.

ul li:nth-child(-n+3) {
   font-weight: bold;
   text-transform: uppercase;
}

result:

| FIRST | SECOND | THIRD | fourth | fifth | sixth | seventh |

All elements but first n elements?

Now we want to select all elements but first tree elements, the answer is "n+4", we need to plus one to elements that we don't want to select. The rule is very tricky, I don't know how the formula come from, just +1 and everything will be fine.

ul li:nth-child(n+4) {
   font-weight: bold;
   text-transform: uppercase;
}

result:

| first | second | third | FOURTH | FIFTH | SIXTH | SEVENTH |

Browser Support

Most browsers are support nth-child, the only problem is IE8 and IE7, if you really need to support ie7-8, jQuery is an option, it works with :nth-child select, selectivizr is another solution.