3 ms·

I feel like this article doesn't explain how `nth-last-child` works clearly. The example uses (n + 3) in a list of five items. Start counting from the 3rd item

I feel like this article doesn't explain how `nth-last-child` works clearly. The example uses (n + 3) in a list of five items. Start counting from the 3rd item - ok, the visualization[1] shows us counting from the 3rd-from-last, so now I'm already confused. And then we count "until the end", which actually shows us counting back toward the beginning[2]. And we end up with 3 items. Are they the last 3? The first 3? I can't tell. The author should have chosen a number that didn't sit at the halfway point of the total number of items. The description makes it sound like we start at 5 -> 4 -> 3, then select 3 items, so we select 3 -> 4 -> 5. But that's a tautology. I think what it means is that we start at 1 -> 2 -> 3, and select 3 -> 4 -> 5... is that correct? [1] https://ishadeed.com/assets/css-has-nth-last-child/nth-last-child-2.png https://ishadeed.com/assets/css-has-nth-last-child/nth-last-... [2] https://ishadeed.com/assets/css-has-nth-last-child/nth-last-child-3.png https://ishadeed.com/assets/css-has-nth-last-child/nth-last-...

slowwriter 3y ago
I entirely agree that the explanation in the article is somewhat confusing, because we're selecting 3 items starting from #3 in a list, counting both from the top and the bottom. So which of those three options does the 3 stand for? The very first demo in the MDN doc for :nth-last-child helped me understand: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-c... – just change the "-n + 3" to "n + 3" to match the example in the article. In that case the selector starts at the third element from the bottom and ends at the top element, matching a total of 6 elements.
aimor 3y ago
Yes, I had the same experience as you and had to not just read but play around with the MDN docs example to get it. I still think the functional formatting is confusing. It makes sense, the pattern applies to every "A*n + B"th index (counting from the end) where n is every integer from 0..inf. But in my mind I'm just providing an offset and a step size/direction: (offset=B, step=A) or just (B A). I'd be interested to know why it's the way it is.

slowwriter 3y ago

I entirely agree that the explanation in the article is somewhat confusing, because we're selecting 3 items starting from #3 in a list, counting both from the top and the bottom. So which of those three options does the 3 stand for? The very first demo in the MDN doc for :nth-last-child helped me understand: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-c... – just change the "-n + 3" to "n + 3" to match the example in the article. In that case the selector starts at the third element from the bottom and ends at the top element, matching a total of 6 elements.

aimor 3y ago

Yes, I had the same experience as you and had to not just read but play around with the MDN docs example to get it. I still think the functional formatting is confusing. It makes sense, the pattern applies to every "A*n + B"th index (counting from the end) where n is every integer from 0..inf. But in my mind I'm just providing an offset and a step size/direction: (offset=B, step=A) or just (B A). I'd be interested to know why it's the way it is.