این آموزش در تاریخ ۱۴۰۰/۱۰/۱۵ آپدیت شده است.
آموزش شبه کلاس nth-last-child در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس nth-last-child در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس nth-last-child در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) nth-last-child در CSS میتوان بصورت دلخواه از آخر به ابتدا، فرزند nام از یک تگ رو انتخاب و براش استایل دلخواه تعریف کرد.
که این n هم میتونه عدد باشه ( مثه ۳ ) هم میتونه یک کلمه کلیدی ( مثه odd ) و هم فرمول ( مثه ۳n+1 ) ، که در ادامه میتوانید از این حالت ها مثال های مختلفی را مشاهده نمایید.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از شبه کلاس nth-last-child در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از عدد ۲ ( یعنی از بین آیتم های لیست ، از آخر دومین آیتم رو انتخاب کن )
|
1 2 3 4 5 6 7 8 |
<style> /* از آخر دومی رو انتخاب میکنه */ li:nth-last-child(2) { background-color:#e30730; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس nth-last-child در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| ()nth-last-child: | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:nth-last-child( Number | Keyword | Functional ) { دستورات سی اس اس در اینجا } |
Free-Learn
جدول مقادیر شبه کلاس nth-last-child در CSS
در جدول زیر میتوانید مقادیری که میتوان در این شبه کلاس استفاده کرد را مشاهد نمایید.
| مقدار | مثال | توضیح |
|---|---|---|
| number | tr:nth-last-child(5) | انتخاب بر اساس شماره فرزند ( عدد ) |
| odd یا even |
tr:nth-last-child(odd) | انتخاب فرد یا زوج از آخر |
| number(n) | tr:nth-last-child(4n) | از آخر چهارتا چهارتا فرزندان را انتخاب میکند |
| integer(n)+integer | tr:nth-last-child(3n+1) | از آخر،اولین فرزند رو انتخاب و بعدش ۳تا ۳تا فرزندان را انتخاب میکند |
| integer(n)-integer | tr:nth-last-child(3n-1) | از آخر،دومین فرزند رو انتخاب و بعدش ۳تا ۳تا فرزندان را انتخاب میکند |
