:nth-child()

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

/* リスト中の2番目の <li> 要素を選択 */
li:nth-child(2) { 
  color: lime;
}

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

構文

nth-child 擬似クラスは、引数を1つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は1から始まります。

キーワード値

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

関数表記

<An+B>
リスト中の位置が、 An+B で定義された数値のパターンと一致する要素を表します。
A は整数の刻み値です。
B は整数の加算値です。
n はすべての正の整数で、0から始まります。
リスト中の An+B 番目の要素として読むことができます。

形式文法

: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], の要素を表します。最初のものは 0番目 [=5x0] が式の結果として返りますが、 n が0から始まるのに対して添字は1から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように B の部分が >0 となる場合にもっとよく分かるでしょう。
:nth-child(n+7)
7番目とそれ以降のすべての要素を表します。 7番目 [=0+7], 8番目 [=1+7], 9番目 [=2+7], です。
: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 完全対応 ≤37Chrome Android 完全対応 18Firefox 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 完全対応 1.0
Matches elements with no parentChrome 完全対応 57Edge 完全対応 79Firefox 完全対応 52IE 未対応 なしOpera 完全対応 44Safari 未対応 なしWebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 52Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
of <selector> syntaxChrome 未対応 なし
補足
未対応 なし
補足
補足 See bug 304163.
Edge 未対応 なし
補足
未対応 なし
補足
補足 See bug 304163.
Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 854148.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 854148.
Opera Android 未対応 なしSafari iOS 完全対応 9Samsung Internet Android 未対応 なし

凡例

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

関連情報