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

Absolute vs. Relative Positioning

The golden rule of absolute positioning.

Nov 20, 2012

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

Add Custom CSS to SharePoint 2010 without Master Page

Here's how you can add custom styles to a specific site collection in SharePoint 2010.

Dec 02, 2012