# nth-child vs nth-of-type

The `nth-child()` and `nth-of-type()` selectors are “structural” pseudo-classes, which are classes that allow us to select elements based on information within the document tree that cannot typically be represented by other simple selectors.

In the case of `nth-child()` and `nth-of-type()`, the extra information is the element’s position in the document tree in relation to its parent and siblings. Although these two pseudo-classes are very similar, they work in fundamentally different ways.

## How `nth-child()` Works #

The `nth-child()` pseudo-class is used to match an element based on a number, which represents the element’s position amongst it’s siblings. More specifically, the number represents the number of siblings that exist before the element in the document tree (minus 1).

This number is expressed as a function, `an+b`, where `n` is the index, and `a` and `b` are any integers we pass. For example, to select every element, we could write any of the following -

``:nth-child(1n+0) { /* styles */ }:nth-child(n+0) { /* styles */ }:nth-child(1n) { /* styles */ }``

In addition to using this function, we can pass a single integer, e.g. `:nth-child(1)` or use one of the set keywords, `odd` or `even`. These keywords are alternatives for writing out the functional notation for selecting every odd or even numbered element.

``:nth-child(odd) { /* styles for odd elements */ }:nth-child(2n+1) { /* styles for odd elements */ }:nth-child(even) { /* styles for even elements */ }:nth-child(2n+0) { /* styles for even elements */ }``

When using `:nth-child()` on its own, it is simple enough to predict which element will be selected. For example, using this markup -

``<div class="example">	<p>This is a <em>paragraph</em>.</p>	<p>This is a <em>paragraph</em>.</p>	<p>This is a <em>paragraph</em>.</p>	<div>This is a <em>divider</em>.</div>	<div>This is a <em>divider</em>.</div> <!-- Element to select -->	<p>This is a <em>paragraph</em>.</p>	<p>This is a <em>paragraph</em>.</p>	<div>This is a <em>divider</em>.</div>	<p>This is a <em>paragraph</em>.</p>	<div>This is a <em>divider</em>.</div></div>``

If we wanted to select the fifth element, the div, we could simply write the following -

``.example :nth-child(5) { background: #ffdb3a; }``

However, unexpected results may occur when there are multiple types of elements, and we need to combine the `:nth-child()` pseudo-class with type or class selectors. For example, to select that same div element again, we may be tempted to write the following -

``.example div:nth-child(2) { background: #ffdb3a; } ``

Note - Will not work

The reason this will not work is because the element that selector is targeting does not actually exist. Using the above selector, the user agent will go through the following steps -

1. Select all the child elements of `.example`
2. Find the second element in that list, irrespective of type
3. Check if that element is a type of `div`

Since the second element in the document tree is a paragraph, not a div, nothing is selected. If we wanted to select the second div element, we would have to use the `nth-of-type()` pseudo-class.

## How `nth-of-type()` Works #

The `nth-of-type()` pseudo-class, like `nth-child()`, is used to match an element based on a number. This number, however, represents the element's position within only those of its siblings that are of the same element type.

This number can also be expressed as a function, or using the keywords `even` or `odd`. Using the example markup above, we can select all the odd paragraphs by writing -

``.example p:nth-of-type(odd) { background: #ffdb3a; }``

When we use this selector, the user agent goes through the following steps -

1. Select all the child elements of `.example` that are of the type `p`
2. Create a new list of only these elements
3. Select the odd numbers from that list

Because of this, we can now select the second div, the fifth child of `.example` -

``.example div:nth-of-type(2) { /* styles */ } ``

## Other "nth" Pseudo-Classes #

Besides `nth-child()` and `nth-of-type()`, there are a number of other structural pseudo-classes we can use to select elements based on their position within their siblings. Like `nth-child()` and `nth-of-type()`, they fall into two groups - the ones that are type-independent, like `nth-child()`, and the ones that are type-dependent, like `nth-of-type()`.

Type-independent Type-dependent
nth-child() nth-of-type()
nth-last-child() nth-last-of-type()
first-child() first-of-type()
last-child() last-of-type()
only-child() only-of-type()

### Counting From The End - `nth-last-child()` vs `nth-last-of-type()`#

These pseudo-classes work like `nth-child()` and `nth-of-type()`, but they begin counting from the last element in the group of siblings instead of the first.

``.example :nth-last-child(1) { background: #a6cae7; } .example p:nth-last-of-type(1) { background: #ffdb3a; } ``

### The First Element - `first-child()` vs `first-of-type()`#

The `first-child()` and `first-of-type()` pseudo-classes select the first element. They can be thought of as using the `nth-child()` and `nth-of-type()` pseudo-classes, but simply passing in a value of 1.

``.example :first-child() { /* styles */ }.example :nth-child(1) { /* styles */ } /* same as above */.example :first-of-type() { /* styles */ }.example :nth-of-type(1) { /* styles */ } /* same as above */``

### The Last Element - `last-child()` vs `last-of-type()`#

These are the opposite to the `first-child()` and `first-of-type()` pseudo-classes. They can be thought of as using the `nth-last-child()` and `nth-last-of-type()` pseudo-classes, but passing in a value of 1.

``.example :last-child() { /* styles */ }.example :nth-last-child(1) { /* styles */ } /* same as above */.example :last-of-type() { /* styles */ }.example :nth-last-of-type(1) { /* styles */ } /* same as above */``

### The Only Element - `only-child()` vs `only-of-type()`#

Finally, these pseudo-classes will select an element that is the only child. For `only-child()`, the element must be literally the only child of it’s parent, regardless of type. For `only-of-type()`, the element need only be the only child of its type.

``.example :only-child() { /* styles */ }.example p:only-of-type() { /* styles */ }``

## Keep in touch KeepinTouch

### Subscribe to my Newsletter 📥

Receive quality articles and other exclusive content from myself. You’ll never receive any spam and can always unsubscribe easily.