22+ CSS :nth-child() Examples

Showcasing 22+ HTML and CSS nth-child() code examples for frontend developers and UI developers. Each item is free and helps to target specific child elements in a document object model.

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