Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Advanced Selectors Pseudo-Classes: :nth-child

Steve Isaacs
Steve Isaacs
2,112 Points

I don't see why :nth-last-child works this way in the video

In the final example, Guil uses

css

li:nth-last-child(-n+3) {
    color: white;
    background-color: black;
}

But previously (in the nth-child example) he demonstrated that -n in the expression worked in reverse, counting UP the list items.

css

li:nth-child(-n+5) {
    color: white;
    background-color: black;
}

Ok, but now that we're using last-child AND the -n - shouldn't that be counting UP the list as well, just from the bottom? So in first code I pasted - it seems it should be counting UP from the last child to the third from the last, then selecting all the list items going UP the list.

Logically that makes sense to me, but the code shows just the last three selected. So it's selecting going down, even though it's an -n. Confused.

2 Answers

The nth-last-child seems to flip the entire operation, so it starts at the last child, goes UP three and counts DOWN from there.

I hope this is correct, but this is how I understood it. Try changing the code to -n+4, -n+5, etc. to test.