# CSS nth-child selector basics

Today we'll be going back to some CSS basics. I tend to use nth-child selectors in my articles.

But that made me realise I haven't really gone over the basics of using nth-child selectors.

Today we will be exploring the options of this powerful CSS selector and some examples.

## Nth-child basic selectors

Let's start off by using some basic selectors.

We can define which element we want to select.
So lets say we want to select the third item.

```html
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
```

```css
li:nth-child(3) {
	color: green;
}
```

Result:

![nth-child number selector](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953090173/kNoTwk5wQ.png)

## Odd/Even selector

We can select every odd or even code by using these attributes.

```css
li:nth-child(odd) {
	color: red;
}
```

Result:

![nth-child odd selector](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953180508/mOfb-Ohpt.png)

```css
li:nth-child(even) {
	color: blue;
}
```

Result:

![nth-child even selector](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953276502/dkIvFotzH.png)

## Every x selector

Something cool we do is select every x element, so let's say we want every fourth element:

```css
	li:nth-child(4n) {
	color: purple;
}
```

Result:

![nth-child every 4th](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953487189/op6o9I7v9.png)

Or if we want to include the first one:

```css
li:nth-child(4n+1) {
	color: purple;
}
```

Result:

![nth-child every 4th from 1](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953546992/KCD9skbbi.png)

We can also start from the second for instance:

```css
li:nth-child(4n+2) {
	color: purple;
}
```

Result:

![nth-child every 4th from 2](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953604949/keOd4BGNb.png)

## Everything but the first selector

We can even have a selector that states select everything but the first three elements.

```css
li:nth-child(n+4) {
	color: teal;
}
```

Result:

![nth-child everything but first three](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953815447/vne_7Xk5x.png)

## Only first number selector

Another cool thing we can do it select only the first x amount.
Let's get the first three

```css
li:nth-child(-n+3) {
	color: teal;
}
```

Result:

![nth-child first three](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953716166/xU2rNxDmh.png)

## Selecting the last element

We can even select the last element.

```css
li:last-child {
	color: orange;
}
```

Result:

![nth last-child selector](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953907898/17CMTtCwu.png)

With this, we can also offset to get the second to last one.

```css
li:nth-last-child(2) {
	color: orange;
}
```

Result:

![nth-last-child second to last](https://cdn.hashnode.com/res/hashnode/image/upload/v1603953976867/7uDnaiAf0.png)

## Combining selectors

We can even combine selectors!

Let's say you want to get every even number from an odd list amount.

```html
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
```

```css
ul:nth-child(odd) li:nth-child(even) {
	color: orange;
}
```

This will get all the odd `ul` and then all the even `li` in those.

Result:

![nth-child double selector](https://cdn.hashnode.com/res/hashnode/image/upload/v1603954160335/8HKRdyewL.png)

Have a play around with this Codepen, try and change some selector to see what happens!

%[https://codepen.io/rebelchris/pen/wvWyxjw]

## Browser Support

The nth-child selector has really good support and can be used in most of the browsers.
Don't hesitate to make use of them.

![CSS nth-child support](https://caniuse.bitsofco.de/static/v1/mdn-css__selectors__nth-child-1603954242177.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)