CSS :nth-child() cheat sheet

Published:
Updated:
Author:
License:
CC BY-NC-SA 4.0

The CSS :nth-child() selector styles elements based on their order within a parent container, supporting exact positions, even/odd patterns, and mathematical formulas. It enables flexible, dynamic styling by targeting specific children in a list or collection.

Introduction #

The CSS :nth-child() selector is a pseudo-class used to style specific elements based on their order within a parent container. It allows you to apply styles to elements that match a specified pattern.

The :nth-child() selector counts elements based on their position within the parent, not based on class or type unless combined with the element's tag. Counting starts from 1, not 0.

Also see the CSS selectors cheat sheet.

Syntax: #

selector:nth-child(n)

Specificity of :nth-child() #

The :nth-child() pseudo-class is treated like a class selector, meaning it has a specificity value of 0, 1, 0 (zero for inline styles, one for classes/pseudo-classes, zero for element selectors).

Recipes #

Select the second child element #

li:nth-child(2) { background: black; color:white; }
1  2  3  4  5

Select only the first two child elements #

li:nth-child(-n+2) { background: black; color:white; }
1  2  3  4  5

Select all but the first two child elements #

li:nth-child(n+3) { background: black; color:white; }
1  2  3  4  5

Select every second, starting at the first child element #

li:nth-child(4n+1) { background: black; color:white; }
1  2  3  4  5

Select the odd child elements #

li:nth-child(odd) { background: black; color:white; }
1  2  3  4  5

Select the even child elements #

li:nth-child(even) { background: black; color:white; }
1  2  3  4  5 

Select the last child element #

li:nth-last-child { background: black; color:white; }
1  2  3  4  5

Also: :last-child selector

Select the third to last child element #

li:nth-last-child(3) { background: black; color:white; }
1  2  3  4  5

Select the last two child elements #

li:nth-last-child(-n+2) { background: black; color:white; }
1  2  3  4  5

Further readings #

Sources and recommended, further resources on the topic:

Jonas Jared Jacek • J15k

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

License: CSS :nth-child() cheat sheet by Jonas Jared Jacek is licensed under CC BY-NC-SA 4.0.

This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. If others modify or adapt the material, they must license the modified material under identical terms. To give credit, provide a link back to the original source, the author, and the license e.g. like this:

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/publications/css-n-th-child-cheat-sheet">CSS :nth-child() cheat sheet</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-NC-SA 4.0</a>.</p>

For more information see the DITig legal page.

“Good design comes from a deep understanding of the technologies behind the scenes.”

Jeffrey Veen, American designer and design strategistThe Art & Science of Web Design, - IT quotes