cssblog.ir logo
S

nth-child

انتخاب‌گر فرزند از طریق شماره فرزند (N)

ترتیب قرارگیری عناصر در داخل صفحه گاها می‌تواند مسئله مهمی از لحاظ نحوه نمایش و استایل صفحه باشد. این سلکتور به ما کمک می‌کند که عناصر را با شماره یا ترتیب آنها انتخاب کنیم

یکی از کاربردی‌ترین سلکتورهای CSS سلکتور مربوط به انتخاب فرزند N ام می باشد. شاید در طراحی برخی از وبسایت‌ها مشاهده کرده باشید که ردیف‌های یک جدول بصورت یکی در میان دارای رنگ متفاوت هستند یا مطالب یک وبسایت با الگوی منظمی دارای رنگ زمینه‌های مختلفی شده‌اند (مثلا اول سفید، دوم صورتی، سوم آبی) برای انجام چنین کارهایی می توان از سلکتور فرزند N ام استفاده نمود.

مثال: انتخاب سومین عنصر

 مثال انتخاب مضارب ۳

 

مقادیری که nth-child قبول می کند

۱- عدد

عدد صحیحی که بیانگر شماره یک عنصر به نسبت والد آن می باشد.

مثال های زیر را در نظر بگیرید:

ul li:nth-child(4) {

}


۲- فرمول

می‌توان به عنوان ورودی یک فرمول را به این تابع داد تا فرمول برحسب عنصر والد محاسبه شده و عناصری که با آن مطابقت داشته باشند انتخاب شوند.

مثال های زیر را در نظر بگیرید:

ul li:nth-child(2n+1) {

}

ul li:nth-child(4n-1) {
	
}


۳- کلمات کلیدی زوج و فرد

برای سلکتور های زوج و فرد می توانید بجای n مقادیر even (زوج) و odd (فرد) را وارد کنید تا بصورت خودکار عناصر دارای شماره زوج و شماره فرد را انتخاب کنیم.

مثال:

ردیف های فرد جدول

آیتم های زوج لیست

 اگر بخواهیم از این سلکتور استفاده نکنیم چطور؟

بله شما کاملا آزاد هستید و می‌توانید از این سلکتور استفاده نکنید اما در نظر داشته باشید عمل شمارش و دادن کلاس‌های مخلتف به عناصر را باید بصورت دستی انجام دهید و در آخر هم برنامه‌نویس سمت سرور شما باید با دشواری بسیار این کلاس ها را داخل حلقه های تکرار خود درنظر بگیرد.

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

 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند