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