انتخابگرهای nth-child() در مقابل nth-of-type() در CSS – تفاوت چیست؟
![](https://khabarkaav.ir/wp-content/uploads/2024/02/nth-child-vs-nth-of-type-selector-in-css-codesweetly.png)
انتخابگرهای CSS :nth-child()
و :nth-of-type()
موارد را از گروهی از عناصر HTML انتخاب می کنند. اما آنها به روش های مختلف کار می کنند.
در اینجا تفاوت اصلی بین آنها وجود دارد:
![nth-child در مقابل انتخابگر nامین نوع در CSS](https://www.freecodecamp.org/news/content/images/2024/01/nth-child-vs-nth-of-type-selector-in-css-codesweetly.png)
: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 از ابتدا استفاده می کند.
ارسال نظر