خوش آمدید

 

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

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

ادامه مطلب

 

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

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

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

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

li:nth-last-of-type(odd) {

}

li:nth-last-of-type(even) {

}

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

p:nth-last-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-last-of-type(odd) {
  background-color: #eee;
}

این انتخابگر همچنین می تواند یک فرمول به عنوان آرگومان بپذیرد. به عنوان مثال :nth-last-of-type(an+b) که در آن a و b اعداد صحیح مثبتی هستند که ما انتخاب می کنیم. به عنوان مثال :nth-last-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-last-of-type(odd):hover {
  /* styles here */
}

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

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

 

 

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

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