The :nth-child() and :nth-last-child() pseudo-classes in CSS are used to select elements based on their position among siblings, but they count from opposite ends.

Key Differences

1
:nth-child(n) – Selects the nth child from the start (first child is 1).
2
:nth-last-child(n) – Selects the nth child from the end (last child is 1).
3
Both can use formulas like 2n, 2n+1, or 3n+2 for selecting patterns of elements.

Example: :nth-child() vs :nth-last-child()

In this example, :nth-child(2n) highlights items 2, 4, and 6 from the start with a light blue background. :nth-last-child(2n) makes items 2, 4, and 6 from the end bold, demonstrating the difference in counting direction.

Best Practices

1
Use :nth-child() when targeting elements from the beginning of the container.
2
Use :nth-last-child() when targeting elements from the end.
3
Combine with other pseudo-classes like :not() or :first-child for precise selections.
4
Test with dynamic content as adding/removing elements may affect which items are selected.

Difficulty: 3/10

Topics: CSS selectors, child indexing, layout targeting

Scenario Questions

0-2 years experience

1
You're styling a list of user avatars and want to highlight every third one starting from the first — but when you add a profile banner above the list, the styling breaks. What’s likely going wrong, and how would you fix it?
2
You used :nth-child(2n) to style alternating rows in a table, but the last row isn’t getting the right background. Why might that be, and how would you verify your selector is working correctly?
3
A teammate says :nth-last-child(1) and :last-child do the same thing — is that true? Show me an example where they behave differently.

2-5 years experience

1
Our dynamic comment thread sometimes shows a 'New!' badge on the wrong comment after a user deletes one. We’re using :nth-child(1) to target the first comment — what’s the bug, and how would you fix it without changing the HTML structure?
2
A component renders a list of items where the first and last items have special padding, but the padding breaks when the list is filtered client-side. How would you debug and resolve this using CSS selectors?
3
We’re using :nth-last-child(-n+2) to style the last two items in a feed, but when a loading skeleton appears, the styles apply incorrectly. How do you handle this without adding extra classes?

5-8 years experience

1
You’re building a reusable card grid component that needs to style the last two items differently for visual balance, but the component is used in multiple contexts — some with dynamic content, some with placeholders. How would you design the CSS to be robust across all cases without relying on JS?
2
A legacy UI uses :nth-child() heavily for layout, but now we’re migrating to a server-rendered system where the number of siblings varies by user role. How do you refactor the CSS to avoid brittle styling and reduce regressions?
3
In a high-traffic dashboard, we’re seeing layout shifts when users toggle filters that change the number of list items. How would you audit and optimize the CSS selectors to minimize reflows and ensure visual stability?

8+ years experience

1
We’re standardizing a design system across 15+ products, and some teams rely on :nth-child() for layout while others use :nth-last-child() — this is causing inconsistent behavior in shared components. How would you architect a solution that enforces predictability without forcing teams to rewrite all their CSS?
2
A legacy component uses :nth-last-child() to style footer actions, but now we’re adding A/B test variants that inject promotional banners conditionally. How do you decouple styling from structural assumptions at the architecture level to support long-term experimentation?
3
Our CSS-in-JS library allows dynamic nth-child selectors based on props, but we’re seeing performance degradation in large lists. How would you evaluate whether to replace dynamic nth-child logic with static classes or semantic markup, and what tradeoffs would you present to engineering leadership?

Follow-up Questions

❓What happens if you insert a new element at the beginning of the list?
❓How would you debug if a style applied to the wrong element in a list?
❓Can you use these selectors with other pseudo-classes like :nth-of-type?