Uploaded May 2022 | Updated September 2026, 2 hours ago

---

An in-depth guide on the :nth-child() pseudo-class that will help you master it and work with it more efficiently.

The tutorial also covers related pseudo-classes :nth-last-child(), :nth-of-type(), :nth-last-of-type() and the selector list argument "of" for :nth-child().

🎨 Demo: codepen.io/ZoranJambor/pen/xxYbMRe/03fcbabe16dc16f78ac7e2e9d30aa194

📖 Chapters
00:00 Intro
00:35 How :nth-child() works
01:24 Functional notation for :nth-child()
05:07 Select a range of items using multiple :nth-child() pseudo-classes
05:53 How :nth-last-child() works
06:36 Select an entire list only when there is a certain number of items or more present
08:48 How :nth-of-type() works
11:02 How :nth-last-of-type() works
11:28 How the selector list argument "of" for :nth-child() works
12:57 :nth-col() and :nth-last-col()
13:28 Conclusion

📚 Resources
nth-child: developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
nth-last-child: developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
nth-of-type: developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
nth-last-of-type: developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type
nth-col: developer.mozilla.org/en-US/docs/Web/CSS/:nth-col
nth-last-col: developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-col

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css