CSS nth-child selector: a practical introduction with examples

Today we are going back over some CSS basics. I tend to reach for the CSS nth-child selectors in my articles.

Which made me realise that I have never really covered the basics of the css nth-child selectors. nth-child is a CSS pseudo-class that lets you select elements.

Today we are going to explore the options this powerful CSS selector gives you, through a few examples.

Let us start with a few basic css nth-child selectors:

We can set the number of the element we want to select. Say we want to select the third item in the list.

css

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

html

<ul class="article-list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

The result is that only the third item is green

Item 1
Item 2
Item 3
Item 4
Item 5

The odd/even selector

We can select every odd- or even-numbered element using odd and even.

css

.article-list-odd li:nth-child(odd) {
    	color: green;
}

html

<ul class="article-list-odd">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

The result is that only the odd items are selected:

Item 1
Item 2
Item 3
Item 4
Item 5

and nth-child(even) for the even results:

css

.article-list-even li:nth-child(even) {
    	color: red;
}

Item 1
Item 2
Item 3
Item 4
Item 5

Every X items

Something else we can do with the nth-child selector is pick out every x items. Say, for example, that we want to select every fourth item:

css

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

Now every 4th child element is selected:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

css

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

And if we want to include the first item:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Or the second item:

css

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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Select the first x items

We can even use a selector that picks every tag except the first three items.

css

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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Select every item except the first x

We can even use a selector that picks every tag except the first three items.

css

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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Select the first or the last item

We can even select the first or the last item with :first-child and :last-child

css

... li:first-child {
	color: red;
}
... li:last-child {
	color: blue;
}

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

With that, we can also offset the count to reach the second-to-last item in the list.

css

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

Item 1
Item 2
Item 3
Item 4
Item 5

Combining selectors

We can also combine nth-child selectors!

Say you want to get every even item inside the odd-numbered lists.

css

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

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>

Item 1
Item 2
Item 3
Item 4
Item 5

Item 1
Item 2
Item 3
Item 4
Item 5

Item 1
Item 2
Item 3
Item 4
Item 5

Conclusion

I hope this article helps you while you are building your sites with the nth-child pseudo-class. If you want to see what other css pseudo-classes are out there, have a look at the following articles:

CSS