Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Steve Isaacs
Steve Isaacs
2,112 Points
Posted by 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

Trent Hayes
Trent Hayes
9,899 Points

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.

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Guil Hernandez perhaps you can best explain this one? :-)