انتخاب اولین یا آخرین نوع از یک عنصر در CSS

در یک روش  که مشابه با انتخاب اولین و آخرین فرزند از یک عنصر می باشد، می توانیم اولین یا آخرین مورد از یک نوع(type) عنصر، که در داخل یک عنصر دیگر قرار دارد را انتخاب کنیم. این به ما امکان می دهد که بعنوان مثال اولین جدولی که در درون یک عنصر داده شده قرار دارد را صرف نظر از اینکه چه تعداد عنصر قبل از آن قرار داشته باشند، انتخاب کنیم. 

table:first-of-type {border-top: 2px solid gray;}

توجه کنید که این کد به تمام سند اعمال نمی شود. یعنی اینکه دستور نشان داده شده، اولین جدول درون سند را انتخاب نمی کند تا تمام دیگر موارد را از قلم بیندازد. بلکه به جای آن، اولین عنصر جدولی که در داخل هر عنصری قرار دارد که حاوی یکی از آنهاست انتخاب می کند و هر عنصر جدول خواهر یا برادر که پس از اولین جدول آمده باشند را نادیده می گیرد. بنابراین، اگر یک ساختار سند مانند تصویر 2.29 داشته باشیم، دایره های آبی رنگ جدول هایی هستند که انتخاب شده اند. 

(تصویر 2.29 : انتخاب اولین نوع از جدول ها)

در داخل محتوای جدول ها، یک راه مفید برای انتخاب اولین سلولِ داده که در داخل یک ردیف(row) قرار دارد، صرف نظر از اینکه یک سلول عنوان(header) قبل از آن در ردیف(row) مورد نظر آمده باشد یا نه صورت زیر است:

td:first-of-type {border-left: 1px solid red;}

این دستور، اولین سلول داده(یعنی <td>) را در هر یک از ردیف(<tr>) های جدول انتخاب می کند:

<tr>
  <th scope="row">Count</th>
  <td>7</td>
  <td>6</td>
  <td>11</td>
</tr>
<tr>
  <td>Q</td>
  <td>X</td>
  <td>-</td>
</tr>

آن را با تاثیر دستور td:first-child مقایسه کنید؛ که اولین عنصر <td> را در دومین ردیف(row) انتخاب می کند، اما نه در ردیف(row) اول. زیرا دستور td:first-child هر عنصر td که اولین فرزند از یک عنصر دیگر باشد را انتخاب می کند. اما در خط شماره 2 از کد بالا، یک عنصر th قرار دارد که اولین عنصر فرزند برای این tr می باشد، پس در این بخش، عنصر td اولین فرزند از <tr> اول محسوب نمی شود. اما در <tr> دوم در خط 7 و 8 عنصر <td> اول، بعنوان اولین فرزند انتخاب می شود. 

طرف دیگر ماجرا، دستور :last-of-type است که آخرین نمونه از یک نوع عنصر داده شده را از میان عناصر خواهر و برادر آن انتخاب می کند. به طریقی می توان گفت که این دستور درست مانند دستور :first-of-type عمل می کند جز اینکه کار را از آخرین عنصر در یک گروه از خواهرها و برادرها شروع می کنیم.  و به سمت عنصر اول به عقب حرکت می کنیم تا به نمونه‌ای از آن نوع برسیم. 

ساختار این سند در تصویر 2.30 نشان داده شده است؛ دایره های آبی رنگ آنهایی هستند که با استفاده از دستور table:last-of-type انتخاب شده اند. 

(تصویر 2.30 : انتخاب جدول ها با دستور last-of-type)