last-of-type:

last-of-type یک pseudo-class می باشد که از هر نوع خاص عناصر در یک سطح, آخرین آن را انتخاب می کند. یعنی اگر مثلا در یک سطح یک عنوان و پنج پاراگراف و دو عنصر تصویر داشته باشیم می توان با استفاده از این انتخابگر از هر کدام از این نوع عناصر آخرینشان را انتخاب کرد.

فرض کنید HTML به صورت زیر است:

<article>
 <h2>عنوان مقاله</h2>
 <p>...</p>
 <p>...</p>
 <p>...</p>
 <p>پاراگراف آخر</p>
 <img />
</article>

در اینجا آخرین عنصر پاراگراف (تگ p) آخرین عنصر نوع خودش در داخل تگ article می باشند. پس می توان به صورت زیر آخرین پاراگراف را انتخاب و استایل دهی کرد:

p:last-of-type {
  color: green;
}

حال فرض کنید HTML به صورت زیر باشد:

<div class="container">
 <h1>عنوان</h1>

 <nav>
  <ul>
   <li>...</li>
   <li>...</li>
   <li>آیتم آخر</li>
  </ul>
 </nav>

 <article>
  <h2>عنوان مقاله اول</h2>
  <p>
  پاراگرافی دیگر
  </p>
  <p>
  آخرین پاراگراف در مقاله اول... <a href="#">لینک</a>... <a href="#">لینک دیگر</a>
  </p>
 </article>

 <article>
  <h2>عنوان مقاله دوم</h2>
  <p>
   پاراگراف اول
  </p>
  <p>
   پاراگراف آخر در مقاله دوم
  </p>
 </article>
</div>

برای اینکه بتوانیم یک استایل خاص به آخرین مقاله بدهیم داریم:

article:last-of-type {
  background-color: #eee;
  border: 1px solid #ddd;
}

حال اگر بخواهیم آخرین پاراگراف در هر مقاله را داشته باشیم باید بنویسیم:

p:last-of-type {
  font-weight: bold;
}

و کد زیر آخرین لینک در هر نگهدارنده که در اینجا تگ های پاراگراف به عنوان نگهدارنده لینک ها هستند را انتخاب می کند:

a:last-of-type {
  color: deepPink;
}

دمویی در زیر برای بررسی بهتر آماده شده است:

See the Pen :last-of-type by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگرها

last-of-type: در مرورگرهای کروم, فایرفاکس, سافاری, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.