تفاوت nth-child و nth-of-type در css

دوستانی که در زمینه طراحی سایت با css فعال هستند با دو انتخابگر مشابه به یکدیگر روبرو هستند که حتی طراحانی که چندین مدت است با css مشغول به کار می‌باشند نیز درمورد این دو انتخابگر با اشتباه مواجه می‌شوند .

یکی از این انتخابگرها nth-child و دیگری nth-of-type است . هردو این انتخابگرها برای انتخاب یک یا چند آیتم از بین چندین آیتم مشابه یا حتی غیرمشابه که در داخل یک والد مشخص هستند استفاده می‌شود . ابندا از nth-child شروع کنیم !

سیر تا پیاز nth-child در css

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

<div class="Wrap_T">
	<p>Lorem Text</p>
	<a href="#">Home Page</a>
	<span>Span Tag</span>
	<div class="nt4_child">Child For Wrap_T</div>
</div>

در داخل این کد شما با 4 تگ مختلف html روبرو هستید که یکی از نوع p ، یکی از نوع a ، یکی از نوع span و آیتم آخر از نوع تگ Div است . تمامی این 4 تگ ، فرزندان Div والد هستند ک کلاس Wrap_T را دارد .

تگ از نوع p فرزند اول ، تگ از نوع a فرزند دوم ، تگ از نوع span فرزند سوم و آیتم آخر از نوع تگ Div فرزند چهارم یا به عبارتی فرزند آخر است . اکنون اگر قصد داشته باشم تا فرزند سوم را انتخاب کنیم که یک تگ span است می‌توانیم از کد زیر استفاده کنیم :

.Wrap_T:nth-child(3){
	/* .... */
}

شاید برای شما سئوال باشد که چرا مستقیما به تگ span اشاره نکردیم که حالت ساده‌تری بود . نکته اینجاست که اگر چندین تگ span داخل Wrap_T باشد ، نمی‌توان مستقیما برای یک تگ span خاص در داخل آن استایلی نوشت مگر اینکه به آن تگ span ، کلاسی اختصاص داده شود اما به کمک فرزند گزینی ، بدون اینکه کلاسی به تگ span سوم داده شود ، می‌توانیم آن را انتخاب کنیم و سایر تگ های span که بعد از آن ممکن است قرار گرفته باشد ؛ خارج از استایل اعمال شده قرار خواهند گرفت .

دقت داشته باشید که شماره فرزندان از شماره ” 1 ” شروع می‌شود . اکنون برای انتخاب فرزند دوم نیز میتوان از دستور nth-child(2) استفاده کرد . در حالتی دیگر ممکن است کدهای شما به شکل زیر باشد که همه آیتم های داخل تگ والد از یک نوع هستند یعنی مثلا همگی تگ li هستند :

<div class="Menu">
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	<li>List Item 4</li>
	<li>List Item 5</li>
</div>

در این حالت نیز می‌توان مجدد از دستور nth-child استفاده کرده و برای مثال li شماره 5 را انتخاب کرد که البته دو دستور مشهور نیز برای انتخاب فرزند اول و آخر به شکل زیر وجود دارد :

:first-child{}
:last-child{}

به کمک این دو سلکتور نیز می‌توانید فرزند اول و فرزند آخر در داخل یک والد را انتخاب کنید بدون اینکه نگران باشید آیتم آخر مثلا شماره 5 خواهد بود یا شماره 20 ، در هرصورت آیتم اول و آیتم آخر داخل والد ، انتخاب خواهد شد . این دستور همانطور که مشاهده کردید ، اهمیتی نخواهد داد که تگ های داخل یک آیتم والد مشابه هم هستند یا متفاوت از هم ، یعنی در هردو حالتی که در مثال های بالا خدمتتان معرفی کردیم می‌توان از دستور nth-child استفاده کرد . این موضوع را تا این قسمت در ذهن خود داشته باشید تا سراغ سلکتور بعدی برویم .

سیر تا پیاز nth-of-type در css

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

<div class="Wrap_T">
	<p>Lorem Text</p>
	<a href="#">Home Page</a>
	<li>List Item 1</li>
	<span>Span Tag</span>
	<li>List Item 2</li>
	<div class="nt4_child">Child For Wrap_T</div>
	<li>List Item 3</li>
</div>

در این مثال ، در داخل همان Wrap_T که در بالا نیز داشتیم ، چندین آیتم li داخل سایر فرزندها نیز اضافه شده است . اکنون در داخل این مثال قصد داریم تا li دوم که داخل آن عبارت List Item 2 بوده و در حقیقت فرزند 5 است را انتخاب کنیم . خب در مثال بالا ممکن است قصد داشته باشید تا از nth-child برای فرزند 5 استفاده کنید .

برای اینکه در لیست بالا ، آیتم li مدنظر که داخل آن متن List Item 2 قرار دارد را انتخاب کنیم باید به شکل زیر عمل کنیم :

.Wrap_T li:nth-of-type(2){
	/*...*/
}

در این دستور ، کاری با سایر تگ ها نداریم . در حقیقت اینگونه گفتیم که در داخل Wrap_T به سراغ تگ های li برو و در بین تگ های li ، دومین آیتم از آنها را انتخاب کن . پس به کمک این دستور می‌توانیم به نوع یک تگ اشاره کرده و فرزندان آن را انتخاب کنیم ، فارغ از اینکه چند تگ دیگر در داخل والد اصلی و یا در کنار آنها وجود دارد !

همچنین دو سلکتور دیگر نیز به شکل زیر وجود دارند :

:last-of-type
:first-of-type

که کمک خواهد کرد تا اولین آیتم و آخرین آیتم از یک نوع مشخص را داخل والد مدنظر خودتان انتخاب کنید که البته هریک از این دستورات نیز خود می‌توانند زیرشاخه‌هایی داشته باشند که فعلا موضوع آموزشی در این مقاله نیست . در این محتوا سعی کردیم تا به شکلی ساده و با زبان گویا تفاوت اصلی بین nth-child و nth-of-type در css را خدمتتان شرح دهیم ، درصورت داشتن هرگونه مشکل و سئوال در رابطه با این دو سلکتور می‌توانید در قسمت دیدگاه‌های این مقاله همراه ما باشید . موفق و پاینده باشید دوستان من .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا