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

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

解説

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

構文

構文は以下になります。

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>

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

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>

関連項目

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

Tweet