## 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.