بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
بمناسبت عید بزرگ فطر ، 25% تخفیف ویژه با کد : EidFetr

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

مقالات طراحی سایت

در طراحی با css چه زمانی باید از nth-child استفاده کنیم و چه زمانی از nth-of-type ؟ بررسی دقیق تفاوت های دو انتخابگر nth-child و nth-of-type

0 45
تفاوت 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 مدنظر که فرزند 5 است ، چندین فرزند دیگر نیز اضافه شود ، دیگر این li فرزند 5 نخواهد بود ، پس باید از nth-of-type استفاده کنیم !

برای اینکه در لیست بالا ، آیتم 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 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

استفاده از سلکتور visited برای استایل نویسی بهتر لینک‌ها در طراحی پروژه های وب ! درست ترین حالت برای تغییر استایل لینک ها در حالت visited .

0 38

چگونه توسط سلکتور focus: در css ، تغییر استایل های مختلفی را روی المان های فرم ایجاد کنیم ؟ بررسی تفاوت focus و hover در طراحی با css !

0 35
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود