CSS3スタイル虎の巻

:nth-child(n)疑似クラス

:nth-child(n)は指定した要素のn番目の子要素にスタイルを適用する疑似クラスです。

解説

指定した要素のn番目の子要素にスタイルを適用します。
基本的にテーブルの列(tdタグ)やリスト(liタグ)など、連続する要素に対して使用します。

構文

構文は以下になります。

要素:nth-child(n){スタイル}

nには対象の要素番号を指定します。

サンプル

テーブルの3行目を青色にする


table.sample01 tr:nth-child(3){
  background-color:#8080ff;
}

<table class="sample01">
  <caption>【都道府県別人口】</caption>
  <tr><td>01</td><td>北海道</td><td>5,437,988</td></tr>
  <tr><td>02</td><td>青森県</td><td>1,320,329</td></tr>
  <tr><td>03</td><td>岩手県</td><td>1,283,390</td></tr>
  <tr><td>04</td><td>宮城県</td><td>2,328,265</td></tr>
  <tr><td>05</td><td>秋田県</td><td>1,035,051</td></tr>
  <tr><td>06</td><td>山形県</td><td>1,129,441</td></tr>
  <tr><td>07</td><td>福島県</td><td>1,936,008</td></tr>
</table>
【都道府県別人口】
01北海道5,437,988
02青森県1,320,329
03岩手県1,283,390
04宮城県2,328,265
05秋田県1,035,051
06山形県1,129,441
07福島県1,936,008

テーブルの奇数行を黄色、偶数行を青色にする


table.sample02 tr:nth-child(even){
  background-color:#8080ff;
}

table.sample02 tr:nth-child(odd){
  background-color:#ffff80;
}

<table class="sample02">
  <caption>【都道府県別人口】</caption>
  <tr><td>01</td><td>北海道</td><td>5,437,988</td></tr>
  <tr><td>02</td><td>青森県</td><td>1,320,329</td></tr>
  <tr><td>03</td><td>岩手県</td><td>1,283,390</td></tr>
  <tr><td>04</td><td>宮城県</td><td>2,328,265</td></tr>
  <tr><td>05</td><td>秋田県</td><td>1,035,051</td></tr>
  <tr><td>06</td><td>山形県</td><td>1,129,441</td></tr>
  <tr><td>07</td><td>福島県</td><td>1,936,008</td></tr>
</table>
【都道府県別人口】
01北海道5,437,988
02青森県1,320,329
03岩手県1,283,390
04宮城県2,328,265
05秋田県1,035,051
06山形県1,129,441
07福島県1,936,008

関連項目

  • :first-of-type:指定した子要素で一番最初の要素にスタイルを適用する
  • :last-of-type:指定した子要素で一番最後の要素にスタイルを適用する
  • :first-child:一番最初の子要素にスタイルを適用する
  • :last-child:一番最後の子要素にスタイルを適用する
  • :nth-of-type(n):指定したn番目の子要素にスタイルを指定する
  • :nth-child(n):指定した要素のn番目の子要素にスタイルを適用する