# Everything you need to know about :nth-child

Let's talk about `nth-child`

. You can do a lot of things with it, but most people don't know most of them.

We're going to use a blank ol' 9x9 table as demonstration. Without any `nth-child`

shenanigans, it looks like this:

### The basics.

```
td:nth-child(2) {
background-color: #f15b29;
}
```

```
tr:nth-child(3) td {
background-color: #f15b29;
}
```

Note that indices start from one:

```
td:nth-child(1) {
background-color: #f15b29;
}
```

### Ranges.

Think of `n`

as a substitute that matches from zero to infinity: so `nth-child(n + 4)`

is the equivalent of `nth-child(4)`

, `nth-child(5)`

, etc.

```
td:nth-child(n + 4) {
background-color: #f15b29;
}
```

You can do the same thing (well, I guess, the opposite thing) with `-n`

, which evaluates to 0, -1, -2, and so on:

```
tr:nth-child(-n + 7) td {
background-color: #f15b29;
}
```

### Sort of advanced topics.

You can chain these ranges to provide finite subsets:

```
td:nth-child(n+4):nth-child(-n+6) {
background-color: #f15b29;
}
```

And, just as you can turn `n`

into `-n`

, you can also turn it into `2n`

to grab every other element (again, think of n as the infinite set of positive integers, so 2n = `2, 4, 6, 8, ...`

.)

```
td:nth-child(2n) {
background-color: #f15b29;
}
```

These multiples can also be modified and chained, just like anything else:

```
td:nth-child(2n + 1):nth-child(-n + 7) {
background-color: #f15b29
}
```

You can apply the pseudoselector to multiple elements in a definition (and there are `odd`

and `even`

keywords, too!)

```
tr:nth-child(odd) td:nth-child(even) {
background-color: #f15b29
}
```

### nth-of-type

There's also the criminally little-used `nth-of-type`

pseudoselector, which works the exact same way as `nth-child`

except it counts by the number elements of the specific type of the selector, as opposed to `nth-child`

(which counts *all* child elements.)

Our square table makes the difference difficult to illustrate, since they only have `tr`

elements (which only have `td`

elements.) Instead, lets make something a little kookier:

```
<div class='examplediv'>
<span>(S) This is some text.</span>
<div>(D) Here is some more text!</div>
<div>(D) Please, sir, can I have some more text?!</div>
<span>(S) Here's the last bit of text.</span>
<div>(D) Ha, just kidding! This is the last element!</div>
<span>(S) (This space intentionally left blank.)</span>
</div>
```

If we were to try and grab the second span element, `nth-child`

might not necessarily get us what we want:

```
span:nth-child(2) {
font-weight: bold;
}
```

This specifies a span element which is also the second child element of its parent; but since the second child element of our parent `div`

is not a span, nothing matches. But if we were to slap a `nth-of-type`

on that bad boy, we'd be golden!

```
span:nth-of-type(2) {
font-weight: bold;
}
```

### nth-last-child

There's also `nth-last-child`

, which is `nth-child`

's evil twin: instead of counting from the first element, this counts from the last element.

```
td:nth-last-child(2) {
background-color: #f15b29
}
```

### Conclusion

Hope this helped! `nth-child`

is an incredibly powerful front-end tool once you get the hang of it. If there are any other nice recipes or tricks I omitted, lemme know in the comments.

**You should follow me on Twitter.**

**Liked this? Put in your email for weekly updates from yours truly:**

Tweet

## Comments