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

Learning How to Code a Website for Beginners

Learning to jump into web development can be overwhelming. Let's look at a couple ways in which you can get started.

Nov 20, 2012

Full-Size, Looping Background Video with YouTube Video

It seems looping background videos are the new thing. But you don't have to serve up the video on your server. Let's use a YouTube video to accomplish it!

Feb 12, 2016

A Brief Introduction to Inlining Critical CSS

Although more applicable to traditionally-built sites, inlining critical CSS can be a quick and easy performance boost for your site, especially as it grows.

Jun 25, 2022