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

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

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

نکته یا توضیح خاصی وجود ندارد.

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)

Free-Learn

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