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

Styling Placeholders for Select Fields

A (limited) CSS-only approach for styling placeholders, along with a way to work around the limitations with a custom JS-based solution.

Jun 16, 2022

Dynamically Add JavaScript and CSS Files to Your Website Using JavaScript

When you can't use a JavaScript or CSS concatenater, this method can be useful for adding scripts and styles to your site on the fly.

Aug 05, 2013

One of My Favorite Performance-Boosting Netlify Plugins

Inlining critical CSS is a breeze for classic SSG sites built and deployed using Netlify. Here’s how it works.

Jun 25, 2022