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