:first-of-type疑似クラス
:first-of-typeは対象要素の一番最初の子要素にスタイルを指定する疑似クラスです。
解説
対象要素の一番最初の子要素にスタイルを指定します。
似た疑似クラスにfirst-chidがありますが、first-childは要素の種類に関係なく一番最初の子要素が対象となりますが、
first-of-typeは子要素でも指定した要素の一番最初の子要素が対象となります。
構文
構文は以下になります。
要素:first-of-type{スタイル}
サンプル
テーブルの一番最初の列を青色/中央寄せにする
table.sample01 tr td:first-of-type{
background-color:#f0f0ff;
text-align:center;
}
<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 |
関連項目
- :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番目の子要素にスタイルを適用する