22+ CSS :nth-child() Examples

Are you looking for a quick solution to select one or more elements based on their position within a parent element using CSS pseudo-class? Fret not! In this collection, we are showcasing 22+ HTML and CSS nth-child() code examples that allow frontend developers and UI developers to target specific child elements in a web page.

We’ve sourced these examples from Codepen, GitHub, and various other sources, making it easier for professional web developers to apply styles dynamically without requiring extra classes or IDs.

Whether you’re creating a personal website, web applications, e-commerce sites, or blog sites, CSS nth-child offers a modern way to style elements without putting extra lines of codes. We have a wide range of CSS nth-class code snippets allowing frontend developers or web designers to write cleaner markup, enhancing code readability, giving coders better design control, and offering flexibility in web layouts.

Let’s explore our top free CSS nth-child code examples, creating dynamic, responsive user interfaces, and feel the true power of: nth-child() selector

1. CSS :nth-child()

See the Pen <a href="https://codepen.io/mukiwu/pen/AmpWjp"> Untitled</a> by MUKi (<a href="https://codepen.io/mukiwu">@mukiwu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: MUKi
Source: Code / Demo
Created on: AUGUST 27, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

2. CSS – nth-child Selektor

See the Pen <a href="https://codepen.io/sphinxflash/pen/PwPmXZ"> CSS – nth-child Selektor</a> by Andreas Lang (<a href="https://codepen.io/sphinxflash">@sphinxflash</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andreas Lang
Source: Code / Demo
Created on: DECEMBER 2, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Codepen Challenge : nth-child and Friends

See the Pen <a href="https://codepen.io/Shruti-Ag/pen/MWYaWJM"> Codepen Challenge : nth-child and Friends</a> by Shruti (<a href="https://codepen.io/Shruti-Ag">@Shruti-Ag</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shruti
Source: Code / Demo
Created on: DECEMBER 6, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. December 2019 [week 1]

See the Pen <a href="https://codepen.io/nerdy-girl/pen/MWYaPrG"> CodePen Challenge – December 2019 [week 1]</a> by Nerdy Girl (<a href="https://codepen.io/nerdy-girl">@nerdy-girl</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nerdy Girl
Source: Code / Demo
Created on: DECEMBER 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Equal Height and Width Columns using Flexbox

See the Pen <a href="https://codepen.io/imohkay/pen/AWyojz"> Equal Height and Width Columns using Flexbox</a> by Karen Menezes (<a href="https://codepen.io/imohkay">@imohkay</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Karen Menezes
Source: Code / Demo
Created on: OCTOBER 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. All my children

See the Pen <a href="https://codepen.io/twelve13/pen/OJPPNrE"> All my children</a> by caroline (<a href="https://codepen.io/twelve13">@twelve13</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: caroline
Source: Code / Demo
Created on: DECEMBER 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. CSS Tool: Relearn :nth-of-type(<an-plus-b>) v1.04

See the Pen <a href="https://codepen.io/RockStarwind/pen/mZeqaJ"> CSS Tool: Relearn :nth-of-type(<an-plus-b>) v1.04</a> by Rock Starwind (<a href="https://codepen.io/RockStarwind">@RockStarwind</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rock Starwind
Source: Code / Demo
Created on: JUNE 14, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS

8. CSS pattern using :nth selector (animated)

See the Pen <a href="https://codepen.io/abirana/pen/eYmmmVK"> CSS pattern using :nth selector (animated)</a> by Abi Rana (<a href="https://codepen.io/abirana">@abirana</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Abi Rana
Source: Code / Demo
Created on: DECEMBER 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

9. Playing with CSS nth-child

See the Pen <a href="https://codepen.io/shellbryson/pen/eBRXNz"> Playing with CSS nth-child</a> by Shell Bryson (<a href="https://codepen.io/shellbryson">@shellbryson</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shell Bryson
Source: Code / Demo
Created on: NOVEMBER 25, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

10. :nth-child / :nth-last-child

See the Pen <a href="https://codepen.io/nxworld/pen/zrEQJP"> :nth-child / :nth-last-child</a> by Naoya (<a href="https://codepen.io/nxworld">@nxworld</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Naoya
Source: Code / Demo
Created on: JANUARY 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Henry the nth-child(8)

See the Pen <a href="https://codepen.io/ihatetoast/pen/OJPVZXe"> Henry the nth-child(8)</a> by Katy Cassidy (<a href="https://codepen.io/ihatetoast">@ihatetoast</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Katy Cassidy
Source: Code / Demo
Created on: DECEMBER 5, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. 12 nth Selectors

See the Pen <a href="https://codepen.io/borntofrappe/pen/NWPGvjW"> 12 nth Selectors</a> by Gabriele Corti (<a href="https://codepen.io/borntofrappe">@borntofrappe</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gabriele Corti
Source: Code / Demo
Created on: DECEMBER 7, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. CSS :nth-child() pseudo-class

See the Pen <a href="https://codepen.io/ricardozea/pen/adYaER"> CSS :nth-child() pseudo-class</a> by Ricardo Zea (<a href="https://codepen.io/ricardozea">@ricardozea</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ricardo Zea
Source: Code / Demo
Created on: JANUARY 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

14. Triangle Grid with nth-child

See the Pen <a href="https://codepen.io/abcretrograde/pen/OJPPOQq"> Triangle Grid with nth-child #CodePenChallenge</a> by Stephen Lee (<a href="https://codepen.io/abcretrograde">@abcretrograde</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stephen Lee
Source: Code / Demo
Created on: DECEMBER 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

15. CSS :nth-child – Example 1

See the Pen <a href="https://codepen.io/imdevdaniel/pen/KMNOEW"> CSS :nth-child – Example 1</a> by Daniel Alvarenga (<a href="https://codepen.io/imdevdaniel">@imdevdaniel</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Alvarenga
Source: Code / Demo
Created on: JUNE 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. 0123456789 Rhymes

See the Pen <a href="https://codepen.io/hexagoncircle/pen/mdyJVNe"> 0123456789 Rhymes</a> by Ryan Mulligan (<a href="https://codepen.io/hexagoncircle">@hexagoncircle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Mulligan
Source: Code / Demo
Created on: DECEMBER 5, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. Demo: nth-child explained – Keyword

See the Pen <a href="https://codepen.io/matt-harris/pen/QWNXXb"> Demo: nth-child explained – Keyword</a> by Matt Harris (<a href="https://codepen.io/matt-harris">@matt-harris</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matt Harris
Source: Code / Demo
Created on: APRIL 20, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

18. Alphabet

See the Pen <a href="https://codepen.io/ludmila-tretyakova/pen/MWYYJry"> Alphabet</a> by Ludmila Tretyakova (<a href="https://codepen.io/ludmila-tretyakova">@ludmila-tretyakova</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ludmila Tretyakova
Source: Code / Demo
Created on: DECEMBER 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. :nth-child Flower

See the Pen <a href="https://codepen.io/electricgarden/pen/YzPPPBX"> :nth-child Flower</a> by Tyler Durrett (<a href="https://codepen.io/electricgarden">@electricgarden</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tyler Durrett
Source: Code / Demo
Created on: DECEMBER 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

20. Creating new Selectors with :has(): A :nth-child(n of S) polyfill

See the Pen <a href="https://codepen.io/bramus/pen/YzvowwJ"> Creating new Selectors with :has(): A :nth-child(n of S) polyfill</a> by Bramus (<a href="https://codepen.io/bramus">@bramus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bramus
Source: Code / Demo
Created on: DECEMBER 13, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

21. CodePen Challenge 12/2/2019

See the Pen <a href="https://codepen.io/itshipsternoah/pen/abzbGjx"> CodePen Challenge 12/2/2019</a> by Noah (<a href="https://codepen.io/itshipsternoah">@itshipsternoah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Noah
Source: Code / Demo
Created on: DECEMBER 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

22. cpc-nth-child

See the Pen <a href="https://codepen.io/iselia/pen/JjooOKW"> [CPC] cpc-nth-child</a> by Alyssa (<a href="https://codepen.io/iselia">@iselia</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alyssa
Source: Code / Demo
Created on: DECEMBER 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

23. 何番目系の便利なCSSデモ ver2.0

See the Pen <a href="https://codepen.io/ituki_b/pen/Qzwrwo"> 何番目系の便利なCSSデモ ver2.0</a> by ituki_b (<a href="https://codepen.io/ituki_b">@ituki_b</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ituki_b
Source: Code / Demo
Created on: DECEMBER 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript