انتخابگرهای CSS :nth-child() و :nth-of-type() موارد را از گروهی از عناصر HTML انتخاب می کنند. اما آنها به روش های مختلف کار می کنند.

در اینجا تفاوت اصلی بین آنها وجود دارد:

:nth-child() موارد را از یک گروه کلی از عناصر انتخاب می کند. به عنوان مثال، انتخاب یک گره <p> از یک گروه ترکیبی که شامل <h1> ، <div> و <section> است.

:nth-of-type() موارد را از یک گروه مشخص از عناصر انتخاب می کند. به عنوان مثال، انتخاب یک گره <p> از گروهی از <p> خواهر و برادر.

این مقاله از مثال هایی استفاده می کند تا به شما نشان دهد که دقیقاً چگونه این دو انتخابگر در CSS کار می کنند تا بتوانید شباهت ها و تفاوت های آنها را درک کنید.

فهرست مطالب

انتخابگر CSS :nth-child() چیست؟

نحو انتخابگر CSS :nth-child().

نمونه هایی از انتخابگر CSS :nth-child().

انتخابگر CSS :nth-of-type() چیست؟

نحو انتخابگر CSS :nth-of-type().

نمونه هایی از انتخابگر CSS :nth-of-type().

بررسی اجمالی

پس ، بدون هیچ مقدمه ای، بیایید با انتخابگر :nth-child() شروع کنیم.

انتخابگر CSS :nth-child() چیست؟

انتخابگر CSS :nth-child() یک یا چند عنصر فرزند را از بین خواهر و برادرهای مستقیم آنها بدون توجه به نوع گره انتخاب می کند.

نحو انتخابگر CSS :nth-child()

انتخابگر CSS :nth-child() تنها یک آرگومان را می پذیرد. در اینجا نحو است:

 html-element:nth-child(value) { style declarations }

آرگومان value می تواند یکی از موارد زیر باشد:

یک عدد: به عنوان مثال، استفاده از 3 نشان دهنده فرزند سوم است.

کلمه کلیدی even یا odd : ما از آن برای نشان دادن فرزندان زوج یا فرد استفاده می کنیم.

فرمول An+B : از آن برای بیان یک سری اعداد استفاده می کنیم. به عنوان مثال، 2n+3 این اعداد را بیان می کند: [(2x0)+3] ، [(2x1)+3] ، [(2x2)+3] ، [(2x3)+3] ، و غیره.

به موارد زیر توجه کنید:

:nth-child() یک انتخابگر شبه کلاس CSS است.

انتخابگر :nth-child() فقط روی خواهر و برادرهای مستقیم کار می کند.

در فرمول An+B ،

A یک مقدار صحیح انتخابی شم است.

n ضربی است که به طور خودکار از صفر ( 0 ) افزایش می یابد.

+ (یا - ) عملگر جمع (یا تفریق) است.

B یک مقدار افست اختیاری برای افزایش (یا کاهش) نتیجه حاصل از ضرب A و n است.

نمونه هایی از انتخابگر CSS :nth-child()

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

DeepPink را به عنصر <p> که فرزند سوم عنصر والد آن است، اعمال کنید

انتخابگر :nth-child() زیر عنصر <p> را انتخاب می کند که فرزند سوم عنصر والد آن است.

 p:nth-child(3) { color: DeepPink; }

اگر قطعه زیر سند HTML مجموعه قوانین CSS بالا باشد، مرورگرها DeepPink فقط برای عنصر دوم <p> اعمال می‌کنند.

 <h1>First heading 1 element</h1> <p>First paragraph element</p> <p>Second paragraph element</p> <h2>First heading 2 element</h2> <p>Third paragraph element</p> <h3>First heading 3 element</h3> <p>Fourth paragraph element</p> <p>Fifth paragraph element</p>

سعی کنید آن را ویرایش کنید

انتخابگر :nth-child() فقط روی خواهر و برادرهای مستقیم کار می کند. به عنوان مثال، می‌توانید قطعه HTML بالا را دوباره بنویسید تا عناصر تودرتو را به صورت زیر در بر بگیرد:

 <article> <h1>Article's first heading 1 element</h1> <p>Article's first paragraph element</p> <h2>Article's first heading 2 element</h2> <p>Article's second paragraph element</p> <section> <h3>Article's first heading 3 element</h3> <p>Article's third paragraph element</p> <p>Article's fourth paragraph element</p> </section> <h2>Article's second heading 2 element</h2> <p>Article's fifth paragraph element</p> <p>Article's sixth paragraph element</p> </article>

سعی کنید آن را ویرایش کنید

انتخابگر p:nth-child(3) DeepPink فقط در چهارمین گره <p> اعمال می‌کند زیرا فرزند سوم عنصر والد آن است.

DeepPink را برای هر فرزند عجیبی که یک گره <p> است اعمال کنید

انتخابگر :nth-child() زیر هر عنصر فرزند فرد را که یک گره <p> است انتخاب می کند.

 p:nth-child(odd) { color: DeepPink; }

توجه: 1 موقعیت شاخص اولین عنصر فرزند است.

با فرض اینکه قطعه زیر سند HTML برای مجموعه قوانین CSS بالا باشد، مرورگرها DeepPink فقط برای عنصر چهارم <p> اعمال می کنند.

 <h1>First heading 1 element</h1> <p>First paragraph element</p> <h2>First heading 2 element</h2> <p>Second paragraph element</p> <h3>First heading 3 element</h3> <p>Third paragraph element</p> <p>Fourth paragraph element</p>

سعی کنید آن را ویرایش کنید

DeepPink برای هر فرزند زوجی که یک گره <p> است اعمال کنید

انتخابگر :nth-child() زیر هر عنصر زوج زوج را که یک گره <p> هستند انتخاب می کند.

 p:nth-child(even) { color: DeepPink; }

توجه: 1 موقعیت شاخص اولین عنصر فرزند است.

با فرض اینکه قطعه زیر سند HTML برای مجموعه قوانین CSS بالا باشد، مرورگرها DeepPink برای عناصر <p> اول، دوم، چهارم و ششم اعمال می کنند.

 <article> <h1>Article's first heading 1 element</h1> <p>Article's first paragraph element</p> <h2>Article's first heading 2 element</h2> <p>Article's second paragraph element</p> <p>Article's third paragraph element</p> <section> <h3>Article's first heading 3 element</h3> <p>Article's fourth paragraph element</p> <p>Article's fifth paragraph element</p> </section> <h2>Article's second heading 2 element</h2> <p>Article's sixth paragraph element</p> <p>Article's seventh paragraph element</p> </article>

سعی کنید آن را ویرایش کنید

DeepPink را به عنصر فرزند سوم، هفتم، یازدهم و غیره اعمال کنید که یک گره <p> است.

انتخابگر :nth-child() زیر هر عنصر فرزند <p> را انتخاب می کند که شاخص آن مضرب دو ( 2 ) با افست سه ( +3 ) باشد.

توجه: 1 موقعیت شاخص اولین عنصر فرزند است.

 p:nth-child(2n+3) { color: DeepPink; }

مسابقه سرگرم کننده: اگر قطعه زیر سند HTML مجموعه قوانین CSS بالا باشد، سبک مرورگر کدام یک از عناصر است؟

 <p>First paragraph element</p> <p>Second paragraph element</p> <p>Third paragraph element</p> <p>Fourth paragraph element</p> <div><p>Fifth paragraph element</p></div> <p>Sixth paragraph element</p> <p>Seventh paragraph element</p> <p>Eight paragraph element</p> <div><p>Nineth paragraph element</p></div> <p>Tenth paragraph element</p> <p>Eleventh paragraph element</p> <p>Twelfth paragraph element</p>

سعی کنید آن را ویرایش کنید

DeepPink را به فرزند اول، سوم، پنجم و غیره اعمال کنید که یک گره <p> است.

انتخابگر :nth-child() زیر هر عنصر فرزند <p> را انتخاب می کند که شاخص آن مضرب دو ( 2 ) با افست منفی سه ( -3 ) باشد.

توجه: 1 موقعیت شاخص اولین عنصر فرزند است.

 p:nth-child(2n-3) { color: DeepPink; }

مسابقه سرگرم کننده: اگر قطعه زیر سند HTML مجموعه قوانین CSS بالا باشد، سبک مرورگر کدام یک از عناصر است؟

 <p>First paragraph element</p> <p>Second paragraph element</p> <p>Third paragraph element</p> <p>Fourth paragraph element</p> <div><p>Fifth paragraph element</p></div> <p>Sixth paragraph element</p> <p>Seventh paragraph element</p> <p>Eight paragraph element</p> <div><p>Nineth paragraph element</p></div> <p>Tenth paragraph element</p> <p>Eleventh paragraph element</p> <p>Twelfth paragraph element</p>

سعی کنید آن را ویرایش کنید

DeepPink را روی گره‌های <p> که یکی از سه فرزند اول والدین خود هستند، اعمال کنید

انتخابگر :nth-child() زیر اگر گره‌های <p> یکی از سه عنصر اول والدینشان باشند، DeepPink را اعمال می‌کند.

 p:nth-child(-n+3) { color: DeepPink; }

مسابقه سرگرم کننده: اگر قطعه زیر سند HTML مجموعه قوانین CSS بالا باشد، سبک مرورگر کدام یک از عناصر است؟

 <article> <h1>Article's first heading 1 element</h1> <p>Article's first paragraph element</p> <h2>Article's first heading 2 element</h2> <p>Article's second paragraph element</p> <p>Article's third paragraph element</p> <section> <h3>Article's first heading 3 element</h3> <p>Article's fourth paragraph element</p> <p>Article's fifth paragraph element</p> </section> <h2>Article's second heading 2 element</h2> <p>Article's sixth paragraph element</p> <p>Article's seventh paragraph element</p> </article>

ویرایش آن را امتحان کنید

توجه داشته باشید که:

1 موقعیت شاخص اولین عنصر فرزند است.

نحو -n+3 همیشه سه فرزند اول را انتخاب می کند زیرا:

-1 + 3 = 2

-2 + 3 = 1

-3 + 3 = 0

پس ، اکنون که می دانیم انتخابگر CSS :nth-child() چگونه کار می کند، بیایید در مورد :nth-of-type() بحث کنیم تا بتوانیم تفاوت را ببینیم.

انتخابگر CSS :nth-of-type() چیست؟

انتخابگر CSS :nth-of-type() یک یا چند عنصر فرزند را از میان خواهر و برادرهای مستقیم آنها از همان نوع گره انتخاب می کند.

نحو انتخابگر CSS :nth-of-type()

CSS :nth-of-type() تنها یک آرگومان را می پذیرد. در اینجا نحو است:

 html-element:nth-of-type(value) { style declarations }

آرگومان value می تواند یکی از موارد زیر باشد:

یک عدد: به عنوان مثال، استفاده از 3 نشان دهنده نوع عنصر سوم است.

کلمه کلیدی even یا odd : ما از آن برای نمایش انواع عنصر زوج یا فرد استفاده می کنیم.

فرمول An+B : از آن برای بیان یک سری اعداد استفاده می کنیم. به عنوان مثال، 2n+3 این اعداد را بیان می کند: [(2x0)+3] ، [(2x1)+3] ، [(2x2)+3] ، [(2x3)+3] ، و غیره.

به موارد زیر توجه کنید:

:nth-of-type() یک انتخابگر شبه کلاس CSS است.

انتخابگر :nth-of-type() فقط روی خواهر و برادر مستقیم کار می کند.

در فرمول An+B ،

A یک مقدار صحیح انتخابی شم است.

n ضربی است که به طور خودکار از صفر ( 0 ) افزایش می یابد.

+ (یا - ) عملگر جمع (یا تفریق) است.

B یک مقدار افست اختیاری برای افزایش (یا کاهش) نتیجه حاصل از ضرب A و n است.

نمونه هایی از انتخابگر CSS :nth-of-type()

در زیر نمونه هایی از نحوه استفاده از انتخابگر شبه کلاس CSS :nth-of-type() آورده شده است.

DeepPink را روی سومین نوع عنصر <p> اعمال کنید

انتخابگر :nth-of-type() در زیر سومین عنصر <p> را از میان خواهر و برادرهای خود از همان نوع گره انتخاب می کند.

 p:nth-of-type(3) { color: DeepPink; }

با فرض اینکه قطعه زیر سند HTML مجموعه قوانین CSS بالا باشد، مرورگرها DeepPink فقط برای عنصر سوم <p> اعمال می کنند.

 <h1>First heading 1 element</h1> <p>First paragraph element</p> <p>Second paragraph element</p> <h2>First heading 2 element</h2> <p>Third paragraph element</p> <h3>First heading 3 element</h3> <p>Fourth paragraph element</p> <p>Fifth paragraph element</p>

سعی کنید آن را ویرایش کنید

انتخابگر :nth-of-type() فقط روی خواهر و برادر مستقیم کار می کند. به عنوان مثال، می‌توانید قطعه HTML بالا را دوباره بنویسید تا عناصر تودرتو را به صورت زیر در بر گیرد:

 <article> <h1>Article's first heading 1 element</h1> <p> Article's first paragraph element</p> <h2>Article's first heading 2 element</h2> <p>Article's second paragraph element</p> <section> <h3>Article's first heading 3 element</h3> <p>Article's third paragraph element</p> <p>Article's fourth paragraph element</p> </section> <h2>Article's second heading 2 element</h2> <p>Article's fifth paragraph element</p> <p>Article's sixth paragraph element</p> </article>

سعی کنید آن را ویرایش کنید

انتخابگر p:nth-of-type(3) DeepPink فقط برای پنجمین گره <p> اعمال می کند زیرا سومین نوع <p> عنصر اصلی آن است.

پس ، اگر یک گره <p> دیگر به عنصر <section> اضافه کنید، انتخابگر p:nth-of-type(3) DeepPink برای آیتم های پنجم و ششم <p> اعمال می کند.

 <article> <h1>Article's first heading 1 element</h1> <p> Article's first paragraph element</p> <h2>Article's first heading 2 element</h2> <p>Article's second paragraph element</p> <section> <h3>Article's first heading 3 element</h3> <p>Article's third paragraph element</p> <p>Article's fourth paragraph element</p> <p>Article's fifth paragraph element</p> </section> <h2>Article's second heading 2 element</h2> <p>Article's sixth paragraph element</p> <p>Article's seventh paragraph element</p> </article>

سعی کنید آن را ویرایش کنید

DeepPink را برای هر نوع عنصر عجیب <p> اعمال کنید

انتخابگر :nth-of-type() زیر هر عنصر فرزند <p> را با یک شاخص فرد انتخاب می کند.

 p:nth-of-type(odd) { color: DeepPink; }

توجه: 1 موقعیت شاخص اولین عنصر فرزند است.

با فرض اینکه قطعه زیر یک سند HTML برای مجموعه قوانین CSS بالا باشد، مرورگرها DeepPink برای اولین و سومین عنصر <p> اعمال می کنند.

 <h1>First heading 1 element</h1> <p>First paragraph element</p> <h2>First heading 2 element</h2> <p>Second paragraph element</p> <h3>First heading 3 element</h3> <p>Third paragraph element</p> <p>Fourth paragraph element</p>

سعی کنید آن را ویرایش کنید

DeepPink را برای هر نوع عنصر زوج <p> اعمال کنید

انتخابگر :nth-of-type() زیر هر عنصر فرزند <p> را با شاخص زوج انتخاب می کند.

 p:nth-of-type(even) { color: DeepPink; }

توجه: 1 موقعیت شاخص اولین عنصر فرزند است.

با فرض اینکه قطعه زیر سند HTML برای مجموعه قوانین CSS بالا باشد، مرورگرها DeepPink برای عناصر <p> دوم، پنجم و ششم اعمال می کنند.

 <article> <h1>Article's first heading 1 element</h1> <p> Article's first paragraph element</p> <h2>Article's first heading 2 element</h2> <p>Article's second paragraph element</p> <p>Article's third paragraph element</p> <section> <h3>Article's first heading 3 element</h3> <p>Article's fourth paragraph element</p> <p>Article's fifth paragraph element</p> </section> <h2>Article's second heading 2 element</h2> <p>Article's sixth paragraph element</p> <p>Article's seventh paragraph element</p> </article>

ویرایش آن را امتحان کنید

توجه: مرورگرها DeepPink به پاراگراف پنجم اعمال می کنند زیرا این دومین گره <p> عنصر <section> است.

DeepPink را به سومین نوع عنصر <p> ، پنجم، هفتم و غیره اعمال کنید

انتخابگر :nth-of-type() زیر هر عنصر فرزند <p> را انتخاب می کند که شاخص آن مضرب دو ( 2 ) با آفست سه ( +3 ) باشد.

توجه: 1 موقعیت شاخص اولین عنصر فرزند است.

 p:nth-of-type(2n+3) { color: DeepPink; }

مسابقه سرگرم کننده: اگر قطعه زیر سند HTML مجموعه قوانین CSS بالا باشد، سبک مرورگر کدام یک از عناصر است؟

 <p>First paragraph element</p> <p>Second paragraph element</p> <p>Third paragraph element</p> <p>Fourth paragraph element</p> <p>Fifth paragraph element</p> <p>Sixth paragraph element</p> <p>Seventh paragraph element</p> <p>Eight paragraph element</p> <p>Nineth paragraph element</p> <p>Tenth paragraph element</p> <p>Eleventh paragraph element</p> <p>Twelfth paragraph element</p>

ویرایش آن را امتحان کنید

DeepPink را به اولین نوع عنصر <p> ، سوم، پنجم و غیره اعمال کنید

انتخابگر :nth-of-type() زیر هر عنصر فرزند <p> را انتخاب می کند که شاخص آن مضرب دو ( 2 ) با آفست منفی سه ( -3 ) باشد.

توجه: 1 موقعیت شاخص اولین عنصر فرزند است.

 p:nth-of-type(2n-3) { color: DeepPink; }

مسابقه سرگرم کننده: اگر قطعه زیر سند HTML مجموعه قوانین CSS بالا باشد، سبک مرورگر کدام یک از عناصر است؟

 <p>First paragraph element</p> <p>Second paragraph element</p> <p>Third paragraph element</p> <p>Fourth paragraph element</p> <p>Fifth paragraph element</p> <p>Sixth paragraph element</p> <p>Seventh paragraph element</p> <p>Eight paragraph element</p> <p>Nineth paragraph element</p> <p>Tenth paragraph element</p> <p>Eleventh paragraph element</p> <p>Twelfth paragraph element</p>

ویرایش آن را امتحان کنید

DeepPink را به سه نوع عنصر اول <p> اعمال کنید

انتخابگر :nth-of-type() زیر DeepPink برای سه عنصر فرزند اول <p> اعمال می کند.

 p:nth-of-type(-n+3) { color: DeepPink; }

مسابقه سرگرم کننده: اگر قطعه زیر سند HTML مجموعه قوانین CSS بالا باشد، سبک مرورگر به کدام یک از عناصر خواهد بود؟

 <p>First paragraph element</p> <p>Second paragraph element</p> <p>Third paragraph element</p> <p>Fourth paragraph element</p> <p>Fifth paragraph element</p> <p>Sixth paragraph element</p> <p>Seventh paragraph element</p> <p>Eight paragraph element</p> <p>Nineth paragraph element</p> <p>Tenth paragraph element</p> <p>Eleventh paragraph element</p> <p>Twelfth paragraph element</p>

ویرایش آن را امتحان کنید

توجه داشته باشید:

1 موقعیت شاخص اولین عنصر فرزند است.

نحو -n+3 همیشه سه عنصر فرزند اول <p> را انتخاب می کند زیرا:

-1 + 3 = 2

-2 + 3 = 1

-3 + 3 = 0

تحلیل اجمالی

در این مقاله، شباهت ها و تفاوت های بین انتخابگرهای CSS :nth-child() و :nth-of-type() مورد بحث قرار دادیم. ما همچنین از مثال هایی استفاده کردیم تا ببینیم چگونه کار می کنند.

با تشکر برای خواندن!

و در اینجا یک منبع مفید React.JS وجود دارد:

من کتابی در مورد ایجاد بسته های NPM نوشتم!

این یک کتاب راهنمای مبتدی برای تسلط بر هنر ایجاد، آزمایش و انتشار کتابخانه های NPM در اکوسیستم React و JavaScript است.

از یک پروژه مقیاس پذیر برای توضیح اصول ساخت و مدیریت بسته های NPM از ابتدا استفاده می کند.

خبرکاو