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.

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

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

Result:

nth-child number selector

Odd/Even selector

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

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

Result:

nth-child odd selector

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

Result:

nth-child even selector

Every x selector

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

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

Result:

nth-child every 4th

Or if we want to include the first one:

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

Result:

nth-child every 4th from 1

We can also start from the second for instance:

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

Result:

nth-child every 4th from 2

Everything but the first selector

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

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

Result:

nth-child everything but first three

Only first number selector

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

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

Result:

nth-child first three

Selecting the last element

We can even select the last element.

li:last-child {
    color: orange;
}

Result:

nth last-child selector

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

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

Result:

nth-last-child second to last

Combining selectors

We can even combine selectors!

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

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

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

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

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 or Twitter

CSS nth-child selector basics

Comments (1)

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Nth-child basic selectors

Odd/Even selector

Every x selector

Everything but the first selector

Only first number selector

Selecting the last element

Combining selectors

Browser Support

Thank you for reading, and let's connect!

Command Palette

Comments (1)

More from this blog

Nth-child basic selectors

Odd/Even selector

Every x selector

Everything but the first selector

Only first number selector

Selecting the last element

Combining selectors

Browser Support

Thank you for reading, and let's connect!