خوش آمدید

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

ادامه مطلب

 

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

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

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

li:nth-last-child(odd) {

}

li:nth-last-child(even) {

}

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

tr:nth-last-child(odd) {
  background-color: #eee;
}

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

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

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

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

tr:nth-last-child(odd):hover {
  /* styles here */
}

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

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

 

 

 

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

<div>
 <p>....</p>
 <p>....</p>
 <p>....</p>
 <p>پاراگراف آخر </p>
 <span>فرزند آخر</span>
</div>

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

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

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