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