Home

Select the Last n Children in CSS

Sometimes you need to target more than just the last child in a series of HTML elements. Learn how to target the last n number of elements here.

In CSS, :nth-child refers to the child referenced from the beginning of the parent. Take an example:

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

If you were to select :nth-child(2), then the second <li> is selected. So this:

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

Would make two red.

Moving in the other direction is :nth-last-child, which moves backwards. So, this:

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

Would make three red.

Now, let's say we wanted to make the last two elements red. We can use -n and move backwards from the end. So:

ul:nth-last-child(-n + 2) {
color: red;
}

Affects both three and four.

The iterator follows the pattern of an+b. If you want to learn more about how this iteration logic works, Chris Coyier has a great explanation.

Let's Connect

Keep Reading

The 3 Principles of Good CSS Design

CSS is hard, but we make it that way. Keep to the basics and you'll be empower yourself to build and scale products quickly.

Nov 05, 2018

Simple Looping Crossfade Image Slideshow

A simple way to give the appearance of a full-screen looping slideshow with crossfading animation.

May 18, 2018

CSS Grid Layout v CSS Frameworks

Should you be using a CSS Framework to build your grid or should you use the native CSS Grid Layout?

Nov 15, 2018