خوش آمدید

 

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;
}

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

 

 

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

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