In this example, only the last <li> (Item 4) receives the light coral background, bold text, and white color, clearly distinguishing it from the other list items.

Best Practices

1
Use :last-child when you want to target the final element of a container without adding extra classes or IDs.
2
Combine with other pseudo-classes like :not() or :nth-last-child() for more complex patterns.
3
Be aware that dynamic changes to the list (adding/removing items) will affect which element is considered the last.
4
Test across browsers, as :last-child is widely supported but interactions with other pseudo-classes may need verification.

Difficulty: 3/10

Topics: pseudo-classes, CSS selectors, list styling

Scenario Questions

0-2 years experience

1
You're given a list of product cards and need to remove the bottom border only from the last one — how would you do that with CSS?
2
A designer says the last list item in the navigation should have no margin-bottom, but your current CSS isn't working — what's the simplest fix?
3
If you use :last-child on a list that has a hidden item at the end, will it still style the right element? Why or why not?

2-5 years experience

1
Our product list renders dynamically from an API, and sometimes the last item is conditionally hidden — users are seeing broken borders on what looks like the last visible item. How do you fix this?
2
A teammate used :nth-last-child(1) to style the last list item, but it broke after we added a footer div inside the parent container. What went wrong, and how would you fix it?
3
We're seeing inconsistent styling on the last list item across browsers — sometimes it works, sometimes it doesn't. What edge cases should you check for?

5-8 years experience

1
We have a component library where list items can be any element — divs, spans, anchors — and we need to style the last one consistently without knowing the tag. How do you design this without forcing markup constraints?
2
Our list component is used in 20+ features, and we're getting inconsistent behavior because some parents have whitespace text nodes. How do you ensure :last-child works reliably across all contexts?
3
We're migrating from inline styles to CSS modules and need to target the last list item without using global selectors. What's your approach to maintain encapsulation and avoid specificity wars?

8+ years experience

1
We're redesigning our component architecture to support server-side rendering and hydration across multiple frameworks — how do you ensure :last-child styling remains robust when DOM structure is manipulated post-hydration?
2
Our design system has 50+ list variants, and styling the last item is inconsistent because teams use different wrappers. How do you enforce a scalable, maintainable pattern without forcing every team to follow rigid markup rules?
3
We're deprecating legacy list components that used JS to add 'last' classes. How do you migrate 300+ usages to pure CSS pseudo-classes without breaking existing layouts or introducing layout shifts?

Follow-up Questions

❓What if the list items aren't all the same element type?
❓How would you style the last visible item if some are dynamically hidden?
❓Why might :last-child not work as expected in a dynamically rendered list?