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 | s

セレクターの例

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:nth-child()Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 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 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.1
補足
完全対応 10.1
補足
補足 Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり
of <selector> syntaxChrome 未対応 なし
補足
未対応 なし
補足
補足 See bug 304163.
Edge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 854148.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9WebView Android 未対応 なしChrome Android 未対応 なし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 完全対応 57Firefox Android 完全対応 52Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0

凡例

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

関連情報

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

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