آموزش شبه کلاس nth-last-child در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس 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 مشاهده نمایید.

مثال شماره ۱ : استفاده از عدد ۳ ( یعنی از بین آیتم های لیست ، از آخر سومین آیتم را انتخاب میکند )

امتحان کنید

مثال شماره ۲ : استفاده از فرمول ( ۳n+1 ) – یک حلقه ایجاد میشه، از آخرین فرزند شروع میکنه ( یعنی نقطه شروعش از آخر اولین فرزند میشه ) در نتیجه آخرین فرزند رو انتخاب میکنه، بعدش دیگه همینجور تا به ابتدا، هربار هی سومین فرزند رو انتخاب میکنه.

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس nth-last-child در CSS پشتیبانی میکنند یا خیر.

نام انتخابگر Chrome Firefox Opera Safari IE
()nth-last-child: ۴٫۰ ۳٫۵ ۹٫۶ ۳٫۲ ۹

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.

Free-Learn

نکات و توضیحات

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

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)

Free-Learn

دریافت PDF یا پرینت این مطلب