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

/* Selects every fourth element
   among any group of siblings */
:nth-child(4n) {
  color: lime;
}

Syntax

The nth-child pseudo-class is specified with a single argument, which represents the pattern for matching elements.

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 whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element is 1. The values A and B must both be <integer>s.

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

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.
: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 Status Comment
Selectors Level 4
The definition of ':nth-child' in that specification.
Working Draft Adds of <selector> syntax and specifies that matching elements are not required to have a parent.
Selectors Level 3
The definition of ':nth-child' in that specification.
Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 9.5
Notes
Full support 9.5
Notes
Notes Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 9.5
Notes
Full support 9.5
Notes
Notes Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari iOS Full support 3.1Samsung Internet Android Full support Yes
of <selector> syntaxChrome No support NoEdge ? Firefox No support No
Notes
No support No
Notes
Notes See bug 854148.
IE ? Opera ? Safari Full support 9WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 854148.
Opera Android ? Safari iOS Full support 9Samsung Internet Android No support No
Matches elements with no parentChrome Full support 57Edge ? Firefox Full support 52IE ? Opera Full support 44Safari ? WebView Android Full support 57Chrome Android Full support 57Edge Mobile ? Firefox Android Full support 52Opera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also