:nth-child

요약

CSS 의사 클래스 :nth-child(an+b)은 0 이상의 n에 대해서 도큐먼트 트리에서 자기 앞에 an+b-1 개의 형제가 있는 엘리먼트와 일치한다. 더 간단히 말하면 이 셀렉터는 일련의 형제들 중 순서가 an+b 패턴과 일치하는 몇 개의 자식 엘리먼트와 일치한다. 레벨 3 구현에서는 일치하는 엘리먼트의 부모가 있어야 하지만 레벨 4에서는 없어도 된다.

Some examples:

• 0n+3, or simply 3, would match the third element
• 1n+0, or simply n, would match every child element. n does not match on Android Browser 4.3 and below whereas 1n does. 1n does the same thing as 1n+0. Feel free to use whichever looks better.
• 2n+0, or simply 2n, would match child elements 2, 4, 6, 8, etc. You can substitute the keyword even for this expression.
• 2n+1 would match child elements 1, 3, 5, 7, etc. You can substitute the keyword odd for this expression.
• 3n+4 would match child elements 4, 7, 10, 13, etc..

The values a and b must both be integers, and the index of an element's first child is 1. In other words, this class matches all children whose index fall in the set { an + b; n = 0, 1, 2, ... }.

A common use case is to match every other row in a table.

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(2n+1)

Represents the odd rows of an HTML table.

tr:nth-child(odd)

Represents the odd rows of an HTML table.

tr:nth-child(2n)

Represents the even rows of an HTML table.

tr:nth-child(even)

Represents the even rows of an HTML table.

span:nth-child(0n+1)

Represents a span element which is the first child of its parent; this is the same as the :first-child selector.

span:nth-child(1)

Equivalent to the above.

span:nth-child(-n+3)

Matches if the element is one of the first three children of its parent and also a span.

Full example

The following HTML...

<p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code>&lt;em&gt;</code>
 inside the child elements. Children 1, 3, 5, and 7 are selected, as expected.</p>

<div class="first">
      <span>This span is selected!</span>
      <span>This span is not. :(</span>
      <span>What about this?</span>
      <span>And this one?</span>
      <span>Another example</span>
      <span>Yet another example</span>
      <span>Aaaaand another</span>
</div>

<p><code>span:nth-child(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code>
 inside the child elements. Children 1, 5, and 7 are selected. 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>This span is selected!</span>
      <span>This span is not. :(</span>
      <em>This one is an em.</em>
      <span>What about this?</span>
      <span>And this one?</span>
      <span>Another example</span>
      <span>Yet another example</span>
      <span>Aaaaand another</span>
</div>

<p><code>span:nth-of-type(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code>
 inside the child elements. Children 1, 4, 6, and 8 are selected. 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>This span is selected!</span>
      <span>This span is not. :(</span>
      <em>This one is an em.</em>
      <span>What about this?</span>
      <span>And this one?</span>
      <span>Another example</span>
      <span>Yet another example</span>
      <span>Aaaaand another</span>
</div>

...using this CSS...

html {
  font-family: sans-serif;
}

span, div em {
  padding: 10px;
  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;
}

...will result in:

Specifications

Browser compatibility

Notes

• Opera can't handle dynamic insertion of elements.

See also

• :nth-of-type