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

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس nth-child در CSS با من همراه باشید.

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

Free-Learn

شبه کلاس nth-child در CSS

با استفاده از شبه کلاس ( یا هم انتخابگر ) nth-child در CSS میتوان بصورت دلخواه فرزند nام از یک عنصر را انتخاب و براش استایل دلخواه تعریف کرد.

که این n هم میتونه عدد باشه ( مثه ۳ ) هم میتونه یک کلمه کلیدی ( مثه odd ) و هم فرمول ( مثه ۳n+1 ) ، که در ادامه میتوانید از این حالت ها مثال های مختلفی را مشاهده نمایید.

در این حالت ترتیب قرارگیری فرزندان مهمه ، این یعنی اگه گفتید مثلا فرزند شماره ۲ رو انتخاب کن، باید حتما فرزند دوم به ترتیب بعد از فرزند اول قرار داشته باشد.

با استفاده از شبه کلاس nth-of-type میتوان فرزندان را بدون درنظر گرفتن ترتیب قرارگیریشون انتخاب کرد.

نسخه CSS3

Free-Learn

مثال از شبه کلاس nth-child در CSS

در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.

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

امتحان کنید

مثال شماره ۲ : استفاده از کلمات کلیدی ( odd – فرد و even – زوج ) معمولا و بیشتر در جدول ها استفاده میشه – یعنی رنگ f2f2f2 برای زمینه سطرهای فرد و رنگ ۸AC007 برای سطرهای زوج

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

Free-Learn

جدول مقادیر شبه کلاس nth-child در CSS

در جدول زیر میتوانید مقادیری که میتوان در این شبه کلاس استفاده کرد را مشاهد نمایید.

مقدار توضیح مثال
number ۵ مین فرزند از عنصر را انتخاب میکند tr:nth-child(5)
odd یا even
انتخاب عناصر فرد یا زوج tr:nth-child(odd)
number(n) چهارتا چهارتا فرزندان را انتخاب میکند tr:nth-child(4n)
integer(n)+integer اولین فرزند رو انتخاب و بعدش ۳تا ۳تا فرزندان را انتخاب میکند tr:nth-child(3n+1)
integer(n)-integer دومین فرزند رو انتخاب و بعدش ۳تا ۳تا فرزندان را انتخاب میکند tr:nth-child(3n-1)

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب