CSS Tutorial: Simplifying :nth-child

I’m going to take a moment to explain a CSS concept that tripped me up when I first heard about it and started using it: nth-child. This is a really basic and quick overview of the nth-child class so it won’t go into any specifics or lots of details about the philosophy behind the pseudo class.

It does assume that you already understand basic CSS terminology (ex. you know what a pseudo class is, you understand how to write CSS). So without further ado.

nth-child sounds like a B-List horror or sci-fi movie, but it is actually a CSS concept that allows us to select multiple elements at once by using numbers and some simple algebraic equations. The :nth-child pseudo class allows you to target specific items, elements and even a chain of elements based on a little bit of math. For now, let’s focus on the simplest nth-child declaration:

ul li:nth-child(4) {
	color: #89f89f;
}

The CSS above uses nth-child to search for the fourth list or LI item and make only that fourth item the color of #89f89f. You can change the number 4 to any other number. For example if you changed the number from 4 to 5, and it will change only the fifth item to become the #89f89f color instead.

Moving on to more complicated nth-child classes we need to do a bit of light math. Most notably; algebra. nth-child pseudo classes allow us to target specific elements inside of another element as we saw above, but it can also allow us to target chains of elements. For example:

ul li:nth-child(3n+1) {  
  color: #89f89f;
}

The above CSS rule will change the color of every third list item to #89f89f. But how is it doing that and what is this crazy algebra formula for?

The formula 3n+1 can also be expressed as (3xn)+1. In this case, you’d have the first selection for every third item. If you’re like me, and think this all sounds way more complicated than it should be and numbers give you nightmares, then don’t worry. Thankfully there’s a trick to figuring out how nth-child works without resorting to too much math.

Here’s the trick: Think of the 3n portion in the above equation as the pattern or how many you want. Think of the +1 portion in the above equation as the first number to start the pattern.

So if we had 3n+1, nth-child will start the pattern at the first item according to the +1 portion, then for every third item according to the 3n portion, it will affect those.

Here’s another example that we can walk through:

ul li:nth-child(4n+2) {  
  color: #6699ff;
}

In the above example, the second list item will have the color of #6699ff according to the +2 portion of the formula. Then every fourth list item will be of the color #6699ff because of the 4n portion of the formula.

Some very awesome people have created a tool called the :nth Tester to illustrate how the formula works. You can access this tool here: :nth Tester

Pseudo classes can throw a few people for a loop, but it is important to understand how they work because they come in handy if you were to dabble in jQuery, work with more complex HTML5 and CSS3 concepts or even while working with other web programming languages.