:nth-of-type(n)疑似クラス

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

解説

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

構文

構文は以下になります。

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

サンプル

テーブルの1列目を青色/中央寄せ、2列目を赤色、3列目を右寄せにする

table.sample01 tr td:nth-of-type(1){
  background-color:#f0f0ff;
  text-align:center;
}
table.sample01 tr td:nth-of-type(2){
  background-color:#fffff0;
}
table.sample01 tr td:nth-of-type(3){
  text-align:right;
}

<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>

関連項目

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

Tweet