:nth-child()
Quick Summary for :nth-child
The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.
Code Usage for :nth-child
/* Selects the second <li> element in a list */ li:nth-child(2) {   color: lime; }  /* Selects every fourth element    among any group of siblings */ :nth-child(4n) {   color: lime; } 
More Details for :nth-child

:nth-child()

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

/* Selects the second <li> element in a list */ li:nth-child(2) {   color: lime; }  /* Selects every fourth element    among any group of siblings */ :nth-child(4n) {   color: lime; } 

Syntax

:nth-child() takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.

Keyword values

odd

Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

even

Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

Functional notation

<An+B>

Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:

A is an integer step size, B is an integer offset, n is all nonnegative integers, starting from 0.

It can be read as the An+Bth element of a list.

Formal syntax

:nth-child( <nth> [ of <complex-selector-list> ]? )

where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#

where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '||' ]

where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s

Examples

Example selectors

tr:nth-child(odd) or tr:nth-child(2n+1)

Represents the odd rows of an HTML table: 1, 3, 5, etc.

tr:nth-child(even) or tr:nth-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc.

:nth-child(7)

Represents the seventh element.

:nth-child(5n)

Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0. This may seem weird at first, but it makes more sense when the B part of the formula is >0, like in the next example.

:nth-child(n+7)

Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

:nth-child(3n+4)

Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

:nth-child(-n+3)

Represents the first three elements. [=-0+3, -1+3, -2+3]

p:nth-child(n)

Represents every <p> element in a group of siblings. This selects the same elements as a simple p selector (although with a higher specificity).

p:nth-child(1) or p:nth-child(0n+1)

Represents every <p> that is the first element in a group of siblings. This is the same as the :first-child selector (and has the same specificity).

p:nth-child(n+8):nth-child(-n+15)

Represents the eighth through the fifteenth <p> elements of a group of siblings.

Detailed example

HTML
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an    <code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 3, 5, and 7 are selected.</p> <div class="first">   <span>Span 1!</span>   <span>Span 2</span>   <span>Span 3!</span>   <span>Span 4</span>   <span>Span 5!</span>   <span>Span 6</span>   <span>Span 7!</span> </div>  <br>  <h3><code>span:nth-child(2n+1)</code>, WITH an    <code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 5, and 7 are selected.<br>    3 is used in the counting because it is a child, but it isn't    selected because it isn't a <code>&lt;span&gt;</code>.</p> <div class="second">   <span>Span!</span>   <span>Span</span>   <em>This is an `em`.</em>   <span>Span</span>   <span>Span!</span>   <span>Span</span>   <span>Span!</span>   <span>Span</span> </div>  <br>  <h3><code>span:nth-of-type(2n+1)</code>, WITH an    <code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 4, 6, and 8 are selected.<br>    3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,    not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects    children of that type. The <code>&lt;em&gt;</code> is completely skipped    over and ignored.</p> <div class="third">   <span>Span!</span>   <span>Span</span>   <em>This is an `em`.</em>   <span>Span!</span>   <span>Span</span>   <span>Span!</span>   <span>Span</span>   <span>Span!</span> </div> 
CSS
html {   font-family: sans-serif; }  span, div em {   padding: 5px;   border: 1px solid green;   display: inline-block;   margin-bottom: 3px; }  .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) {   background-color: lime; } 
Result

Specifications

Specification
Selectors Level 4 # nth-child-pseudo

See also

:nth-of-type, :nth-last-child

Last modified: Dec 16, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
“If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes it worse, but over time it does calm, and when it does, there’s room to hear more subtle things. You see so much more than you could see before. It’s a discipline; you have to practice it.”
Steve Jobs
Random CSS Property

caption-side

The caption-side CSS property puts the content of a table's <caption> on the specified side. The values are relative to the writing-mode of the table.
caption-side css reference