:first-of-type【先頭該当子要素】疑似クラス
:last-of-type【最終該当子要素】疑似クラス
:only-of-type【唯一の該当子要素】疑似クラス

メモ

構文

構文説明
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>
ththththth
thtdtdtdth
thtdtdtdtd
tdtdtdtdth
tdtdtdtdtd
thtd
only td

関連