CSS:nth-child() 疑似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

/* 兄弟要素の中で3つおきに
   要素を選択 */
:nth-child(4n) {
  color: lime;
}

構文

nth-child 疑似クラスは、要素を選択するパターンを表す引数を1つ取ります。

キーワード値

odd
一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。
even
一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。

関数表記

<An+B>
一連の兄弟要素の中で、 n に正の整数か0が入るとき、 An+B のパターンに一致する位置の要素を表します。最初の要素の番号は 1 です。 AB の値は両方とも <integer> です。

形式文法

: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

セレクターの例

tr:nth-child(odd) 又は tr:nth-child(2n+1)
HTML テーブルの奇数行 (1, 3, 5, など) を表します。
tr:nth-child(even) または tr:nth-child(2n)
HTML テーブルの偶数行 (2, 4, 6, など) を表します。
:nth-child(7)
7番目の要素を表します。
:nth-child(5n)
5番目 [=5×1], 10番目 [=5×2], 15番目 [=5×3], の要素を表します。
:nth-child(3n+4)
4番目 [=(3×0)+4], 7番目 [=(3×1)+4], 10番目 [=(3×2)+4], 13番目 [=(3×3)+4], の要素を表します。
:nth-child(-n+3)
兄弟要素のグループの中で最初の3つの要素を表します。 [=-0+3, -1+3, -2+3]
p:nth-child(n)
兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じ要素を選択します (但し、具体度はより高くなります)。
p:nth-child(1) または p:nth-child(0n+1)
兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは :first-child セレクターと同じです (具体度も同じです)。
p:nth-child(n+8):nth-child(-n+15)
兄弟要素のグループの中で8~15番目の <p> 要素を表します。

詳細な例

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;
}

結果

仕様書

仕様書 状態 備考
Selectors Level 4
:nth-child の定義
草案 <selector> の構文と仕様書に、親を持たない要素も一致するよう追加。
Selectors Level 3
:nth-child の定義
勧告 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 9.5
補足
完全対応 9.5
補足
補足 Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 9.5
補足
完全対応 9.5
補足
補足 Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり
of <selector> syntaxChrome 未対応 なしEdge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 854148.
IE ? Opera ? Safari 完全対応 9WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 854148.
Opera Android ? Safari iOS 完全対応 9Samsung Internet Android 未対応 なし
Matches elements with no parentChrome 完全対応 57Edge ? Firefox 完全対応 52IE ? Opera 完全対応 44Safari ? WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sosleepy
最終更新者: mfuji09,