:nth-child

概要

CSS:nth-child  擬似クラス は、文書木内の自分より前に an+b-1 個の兄弟要素を持ち、親要素を持つ要素にマッチします。ここで、 n にはゼロか正の数が入ります。

もっとわかりやすい説明は: すべての子要素を a 個ごとにグループ分けして、それぞれのグループの b番目 の子要素が、マッチする要素になります。

ab の値は整数でなければなりません。また、先頭の子要素の 添字 (index) は 1 です。

言い換えると、このクラスはその添字が集合 { an + b; ∀n ∈ N } に含まれるすべての子要素にマッチします。

とりわけ、これを使ってセレクタをテーブルの行と 1 行おきにマッチさせることができます。

構文

element:nth-child(an + b) { style properties }

セレクタの作例

tr:nth-child(2n+1)
HTML テーブルの奇数行
tr:nth-child(odd)
HTML テーブルの奇数行
tr:nth-child(2n)
HTML テーブルの偶数行
tr:nth-child(even)
HTML テーブルの偶数行
span:nth-child(0n+1)
親要素の先頭の子要素である span 要素。これは :first-child セレクタと同じです。
span:nth-child(1)
上と同じです。
span:nth-child(-n+3)
親要素の先頭から 3 つ目までの子要素のうちの 1 つ で、span であるものがマッチします。

奇数セレクタの例

次の HTML が...

    <div>
      <span>This span is limed!</span>
      <span>This span is not. :(</span>
      <em>This one is odd. </em>
      <span>Sadly, this one is not...</span>
      <span>But this one is!</span>
    </div>

...この CSS を使うと...

    span:nth-child(2n+1) {
      background-color: lime;
    }

...結果は次のようになります:

仕様

仕様書 策定状況 コメント
Selectors Level 4 草案 変更なし
Selectors Level 3 勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 3.5 (1.9.1) 9.0 9.5 3.1
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 2.1 1.0 (1.9.1) 9.0 9.5 3.1

注記

  • Opera は要素の動的な挿入を扱えません。

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す