:first-of-type【先頭該当子要素】疑似クラス
:last-of-type【最終該当子要素】疑似クラス
:only-of-type【唯一の該当子要素】疑似クラス
メモ
- 該当子要素の疑似クラス
- 要素のカウントは同じ要素の兄弟のみ (:*-child【子要素】系は兄弟要素を全て含む)
- 関連
- 要素については、HTML5 リファレンス メモ 参照
構文
| 構文 | 説明 |
|---|
E:first-of-type { スタイル定義 } | 親要素の先頭子E要素に適用 |
E:last-of-type { スタイル定義 } | 親要素の最終子E要素に適用 |
E:only-of-type { スタイル定義 } | 親要素の唯一の子E要素に適用 |
例
<style>
.first > li:first-of-type { color: red; background-color: lightgray; }
.last > li:last-of-type { color: blue; background-color: lightgray; }
.only > li:only-of-type { color: red; background-color: lightgray; }
</style>
<ul class="first">
<li>先頭
<li>中間
<li>最終
</ul>
<ul class="last">
<li>先頭
<li>中間
<li>最終
</ul>
<ul class="first last only">
<li>先頭
<li>中間
<li>最終
</ul>
<ul class="only">
<li>唯一
</ul>
<style>
table.ex { border-collapse: collapse; }
table.ex th { border: 1px blue solid; background-color: lightblue; }
table.ex td { border: 1px blue solid; }
.first2 td:first-of-type { color: red; background-color: lightgray; }
.last2 td:last-of-type { color: blue; background-color: lightgray; }
.only2 td:only-of-type { color: white; background-color: blue; }
</style>
<table class="ex first2 last2 only2">
<tr><th>th<th>th<th>th<th>th<th>th</tr>
<tr><th>th<td>td<td>td<td>td<th>th</tr>
<tr><th>th<td>td<td>td<td>td<td>td</tr>
<tr><td>td<td>td<td>td<td>td<th>th</tr>
<tr><td>td<td>td<td>td<td>td<td>td</tr>
<tr><th colspan="2">th<td colspan="3">td</tr>
<tr><td colspan="5">only td</tr>
</table>
| th | th | th | th | th |
|---|
| th | td | td | td | th |
|---|
| th | td | td | td | td |
|---|
| td | td | td | td | th |
|---|
| td | td | td | td | td |
| th | td |
|---|
| only td |