شبه کلاس ()nth-of-type: در CSS

:nth-of-type() Pseudo-class

شبه کلاس ()nth-of-type: در CSS عناصر را بر حسب نوع عنصر و موقعیت آنها در میان گروهی از عناصر خویشاوند هدف می گیرد.

css

/* مضرب چهار عناصر را در صورتی
که عنصر از نوع <p> باشد، انتخاب می کند */
p:nth-of-type(4n) {
  color: lime;
}

شبه کلاس ()nth-of-type: یک شناسه قبول می کند که بر حسب آن موقعیت مورد نظر برای انتخاب عناصر مشخص می شود.
برای اطلاعات بیشتر میتوانید به مطلب ()nth-child: مراجعه کنید.

در مثال زیر می توانیم نحوه عملکرد این سودو کلاس را ببینیم:

html

<div>
  <div>این عنصر شمارش نمیشود.</div>
  <p>اولین پاراگراف.</p>
  <p>دومین پاراگراف.</p>
  <div>این عنصر شمارش نمیشود.</div>
  <p>سومین پاراگراف.</p>
  <p>چهارمین پاراگراف.</p>
</div>

css

/* پاراگرافهای فرد */
p:nth-of-type(2n+1) {
  color: red;
}

/* پاراگرافهای زوج */
p:nth-of-type(2n) {
  color: blue;
}

/* اولین پاراگراف */
p:nth-of-type(1) {
  font-weight: bold;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.