Collection of hand-picked free HTML and pure CSS :nth-child() code examples from Codepen and other resources.

Demo image: Retro Neon with nth-child

Author

  • ItsMeNatalie

Made with

  • HTML / CSS (SCSS)

About a code

Retro Neon with nth-child

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: nth-child

Author

  • Shruti

Made with

  • HTML / CSS

About a code

nth-child

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: 12 nth Selectors

Author

  • Gabriele Corti

Made with

  • HTML / CSS (SCSS)

About a code

12 nth Selectors

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS)

About a code

0123456789 Rhymes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Katy Cassidy

Made with

  • HTML / CSS (SCSS)

About a code

Henry the nth-child(8)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Triangle Grid with nth-child

Author

  • Stephen Lee

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Triangle Grid with nth-child

Creating a grid of triangles with CSS Grid and custom properties.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: nth-child

Author

  • Alyssa

Made with

  • HTML / CSS (SCSS)

About a code

nth-child

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Pattern Using :nth Selector

Author

  • Abi Rana

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Pattern Using :nth Selector

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Alphabet

Author

  • Ludmila Tretyakova

Made with

  • HTML / CSS (SCSS)

About a code

Alphabet

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: :nth-child Flower

Author

  • Tyler Durrett

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

:nth-child Flower

It uses nth-child selection to affect the hue of the petals. Try changing the .select-2 class in the HTML with any number from 1 to 20 (e.g. .select-13) to get a feel for how that works.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: :nth-child

Author

  • caroline

Made with

  • HTML / CSS

About a code

:nth-child

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: :nth-child

Author

  • Noah

Made with

  • HTML / CSS (SCSS) / JS

About a code

:nth-child

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -