:nth-child

概要

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

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

a と b の値は整数でなければなりません。また、先頭の子要素の 添字 (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;
    }

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

仕様

ブラウザ実装状況

注記

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