()nth-of-type:

()nth-of-type: یک pseudo-class می باشد که به ما این امکان را می دهد تا عناصری از یک نوع خاص که در درون یک نگهدارنده هستند را بر اساس ترتیبشان انتخاب کنیم.

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

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

()nth-of-type: یک مقدار مثبت به عنوان آرگومان می پذیرید و بر اساس آن عدد, عنصر مربوطه را انتخاب می کند. به عنوان مثال در زیر چهارمین آیتم از یک لیست انتخاب و استایل دهی شده است:

li:nth-of-type(4) {
  background-color: #4A90E2;
}

همچنین می توان آیتم های فرد (odd) و یا زوج (even) را از بین فرزندان یک عنصر انتخاب کرد:

li:nth-of-type(odd) {

}

li:nth-of-type(even) {

}

همانطور که گفته شد این انتخابگر فقط بر روی یک عنصر خاص برای شمارش تمرکز می کند و عناصر دیگر را نادیده می گیرد. در زیر ما می خواهیم پاراگراف های فرد را انتخاب کنیم. توجه کنید که پاراگراف هایی که با این انتخابگر, انتخاب می شوند در سطر خود لزوما عدد فرد نیستند ولی وقتی فقط نوع پاراگراف را در نظر بگیرید در ترتیب فرد قرار خواهند گرفت:

p:nth-of-type(odd) {

}

<article>
  <h2>........</h2>
  <p>عنصر پاراگراف</p> <!-- انتخاب می شود -->
  <p>عنصر پاراگراف</p> 
  <p>عنصر پاراگراف</p> <!-- انتخاب می شود -->
  <span>عنصری متفاوت</span>
  <p>عنصر پاراگراف</p> 
  <p>عنصر پاراگراف</p> <!-- انتخاب می شود -->
  <span>عنصری متفاوت</span>
  <p>عنصر پاراگراف</p> <
  <span>عنصری متفاوت</span> 
</article>

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

tr:nth-of-type(odd) {
  background-color: #eee;
}

این انتخابگر همچنین می تواند یک فرمول به عنوان آرگومان بپذیرد. به عنوان مثال :nth-of-type(an+b) که در آن a و b اعداد صحیح مثبتی هستند که ما انتخاب می کنیم. به عنوان مثال :nth-of-type(3n+1) که وقتی n=0 هست داریم: 3*0 + 1 = 1 یعنی در اولین حرکت اولین فرزند انتخاب می شود. و سپس n=1 می شود و فرزند چهارم انتخاب می شود و الی آخر.

از آنجایی که کنار آمدن با حساب کردن فرمولی که این انتخابگر می پذیرد می تواند گاهی گیج کننده باشد و از طرفی اگر نتیجه فرمول به صورت نمایشی قابل بررسی باشد به سرعت کار بیشتر کمک می کند, ابزارهایی برای این امر ساخته شده اند که در اینجا دو تا از بهترین آنها را معرفی می کنیم:

• lea.verou.me/demos/nth.html
• nth-test.com

مثل دیگر pseudo-class این انتخابگر هم می تواند به صورت زنجیره ای با دیگر انتخابگر ها استفاده شود:

tr:nth-of-type(odd):hover {
  /* styles here */
}

span:nth-of-typee(2n+4)::after {
  /* styles here */
}

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

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

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

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