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

メモ

構文

構文説明
E:first-child  { 【スタイル定義】 } 親要素の先頭子E要素に適用
E:last-child  { 【スタイル定義】 } 親要素の最終子E要素に適用
E:only-child  { 【スタイル定義】 } 親要素の唯一の子E要素に適用

<style>
.first > li:first-child { color: red;  background-color: lightgray; }
.last  > li:last-child  { color: blue; background-color: lightgray; }
.only  > li:only-child  { 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-child { color: red;    background-color: lightgray; }
.last2   td:last-child  { color: blue;   background-color: lightgray; }
.only2   td:only-child  { 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

関連