انتخابگر nth-child در CSS؛ first و last | درس 33 + پروژه درس

درس 33 از دوره آموزش HTML و CSS ارومیا دیزاین

یک فهرست خدمات دارید و می خواهید اولین مورد پررنگ شود، آخرین مورد خط اضافی نداشته باشد و ردیف های زوج رنگ متفاوت بگیرند. لازم نیست برای هر ردیف کلاس جدا بنویسید. انتخابگر nth-child در CSS و شبه کلاس های first-child و last-child، عناصر را بر اساس جایگاهشان میان فرزندان یک والد انتخاب می کنند. در این درس، هم روش استفاده را یاد می گیریم و هم خطاهایی را که شمارش عناصر ایجاد می کند، آزمایش می کنیم.

فایل پروژه و پاسخ: دانلود پروژه درس 33 و پاسخ تمرین (ZIP). فایل شامل HTML، CSS، پاسخ مستقل و راهنمای آزمایش است. ZIP را استخراج و index.html را در مرورگر باز کنید؛ نصب ابزار، اینترنت و کتابخانه خارجی لازم نیست.

انتخابگرهای ساختاری چه تفاوتی با hover دارند؟

در درس حالت های تعاملی CSS، وضعیت عنصر هنگام تعامل کاربر را بررسی کردیم. اینجا به محل عنصر در ساختار HTML توجه می کنیم. برای مثال، اولین li داخل یک ol را انتخاب می کنیم، حتی اگر کاربر هیچ تعاملی نداشته باشد. این موارد شبه کلاس هستند و یک دونقطه دارند؛ با before و after که در درس شبه عناصر CSS خواندیم، تفاوت دارند.

<ol class="services">
  <li>طراحی سایت</li>
  <li>بهینه سازی سایت</li>
  <li>پشتیبانی فنی</li>
  <li>تولید محتوا</li>
</ol>

چهار li بالا یک والد مشترک دارند و نسبت به هم هم سطح هستند. شماره هرکدام را میان فرزندان عنصری همان ol حساب می کنیم. شماره گذاری از 1 شروع می شود؛ مورد دوم شماره 2 دارد. فاصله های بین تگ ها، خط جدید و توضیحات HTML در این شماره گذاری حساب نمی شوند. این شمارش به ترتیب HTML وابسته است، نه به جای ظاهری عنصر پس از جابه جایی با CSS.

first-child؛ انتخاب اولین فرزند

انتخابگر زیر، li را فقط زمانی انتخاب می کند که اولین فرزند عنصری والد خود باشد. در مثال فهرست، اولین مورد خدمات پررنگ می شود. علامت بزرگ تر در انتخابگر یعنی فرزند مستقیم: li های یک فهرست تو در تو را با این قانون هدف نمی گیریم. برای مرور تفاوت کلاس، فرزند و ساختار انتخابگر، درس انتخابگرهای CSS را ببینید.

.services > li:first-child {
  font-weight: 700;
}

first-child به معنی «اولین عنصری که این کلاس را دارد» نیست. شرط آن اولین بودن میان همه فرزندان عنصری همان والد است. اگر می خواهید یک خدمت مشخص همیشه برجسته باشد، حتی وقتی ترتیب عوض می شود، کلاس معنایی مخصوص همان خدمت گزینه مناسب تری است. این انتخابگر برای نقش وابسته به جایگاه، مثل اولین ردیف یک فهرست، کاربرد دارد.

last-child؛ حذف خط اضافی از آخرین مورد

برای ایجاد مرز میان خدمات، به همه li ها خط پایین می دهیم و سپس آن خط را از آخرین مورد حذف می کنیم. وقتی مورد جدیدی به انتهای فهرست اضافه شود، CSS آخرین عنصر جدید را تشخیص می دهد. نیازی به جابه جا کردن کلاس last در HTML نیست. خود متن و ترتیب خدمات همچنان در HTML مدیریت می شوند.

.services > li {
  padding: 12px;
  border-bottom: 1px solid #94a3b8;
}

.services > li:last-child {
  border-bottom: 0;
}

در این مثال border-bottom فقط خط جداکننده است؛ حذف آن محتوای خدمت را پاک نمی کند. اگر میان کادر و نوشته فاصله نامناسب دیدید، مقدار padding و border را جدا بررسی کنید. مدل جعبه در CSS کمک می کند علت فاصله را به جای تغییر تصادفی ویژگی ها پیدا کنید.

nth-child برای انتخاب یک شماره مشخص

با nth-child می توانید جایگاه دقیق را داخل پرانتز بنویسید. نمونه زیر مورد سوم فهرست را انتخاب می کند و یک کادر کناری به آن می دهد. اگر یک مورد قبل از آن اضافه کنید، عنصر منتخب عوض می شود؛ شرط مربوط به شماره سوم است، نه متن «پشتیبانی فنی». این تفاوت را در پروژه با اضافه کردن یک li آزمایش کنید.

.services > li:nth-child(3) {
  border-inline-start: 4px solid #075985;
}

ویژگی border-inline-start کادر را در ابتدای جهت نوشتار قرار می دهد؛ در صفحه فارسی پروژه، کنار راست مورد دیده می شود. اعداد و مقادیر فنی را دقیق و با رقم انگلیسی بنویسید. در فایل پروژه نیز تمام عددهای HTML و CSS انگلیسی هستند. نمایش درست نوشته ها را با تنظیم تایپوگرافی در CSS هماهنگ نگه دارید.

انتخاب ردیف های زوج و فرد با even و odd

برای رنگ آمیزی یکی در میان، از even و odd استفاده می کنیم. even جایگاه های زوج و odd جایگاه های فرد را انتخاب می کند. در فهرست شش موردی پروژه، موارد دوم، چهارم و ششم زمینه آبی دارند. رنگ فقط کمک بصری است؛ متن خدمت، ترتیب و شماره فهرست باقی می مانند تا تشخیص موارد صرفاً به رنگ وابسته نباشد.

.services > li:nth-child(even) {
  background: #e0f2fe;
}

/* An alternative for odd positions */
.services > li:nth-child(odd) {
  color: #17324d;
}

عدد زوج و فرد نسبت به هر والد جدا محاسبه می شود. اگر دو فهرست مستقل داشته باشید، هر دو شمارش خود را از ابتدا شروع می کنند. همچنین عناصری که با display برابر none مخفی شده اند، همچنان در ساختار هستند و در شمارش nth-child حساب می شوند؛ مخفی شدن ظاهری با حذف عنصر از HTML یکسان نیست.

فرمول ساده nth-child؛ هر چند مورد یک بار

به جای عدد ثابت یا even می توانید یک الگوی عددی بنویسید. برای شروع، سه الگوی زیر کافی هستند: 2n برای زوج ها، 2n+1 برای فردها و 3n برای هر سومین مورد. n از صفر و عددهای صحیح نامنفی شروع می شود، اما فقط نتیجه های مثبت می توانند شماره عنصر باشند. بنابراین نتیجه صفر در الگوی سوم، هیچ عنصری را انتخاب نمی کند.

.services > li:nth-child(3n) {
  font-weight: 700;
}

برای 3n نتیجه های قابل انتخاب 3, 6, 9 هستند. برای انتخاب سه مورد اول، الگوی -n+3 را می نویسیم که جایگاه های 1, 2, 3 را پوشش می دهد. لازم نیست همین ابتدا فرمول های پیچیده بسازید؛ ابتدا شماره های مورد انتظار را روی کاغذ بنویسید و سپس نتیجه انتخابگر را در مرورگر مقایسه کنید.

.exercise > li:nth-child(-n+3) {
  background: #e0f2fe;
}

خطای مهم: nth-child همه فرزندان عنصری را می شمارد

گاهی انتخابگر ظاهراً درست است، ولی پاراگراف مورد انتظار رنگ نمی گیرد. علت می تواند وجود یک عنوان قبل از پاراگراف ها باشد. در نمونه بعد، h3 اولین فرزند است؛ در نتیجه پاراگراف اول، فرزند دوم محسوب می شود. نوشتن p قبل از nth-child باعث نمی شود که شمارش فقط میان پاراگراف ها انجام شود؛ عنصر هم باید p باشد و هم در شماره خواسته شده قرار بگیرد.

<div class="mixed">
  <h3>عنوان بخش</h3>
  <p>پاراگراف اول</p>
  <p>پاراگراف دوم</p>
</div>

.mixed > p:nth-child(2) {
  border-inline-start: 4px solid #075985;
}

.mixed > p:nth-of-type(2) {
  background: #fef3c7;
}

قانون اول، پاراگراف اول را می گیرد؛ قانون دوم، دومین پاراگراف را انتخاب می کند. nth-of-type شمارش را میان عناصر هم نوع، مانند p، انجام می دهد. این انتخابگر هم به معنی «دومین مورد دارای یک کلاس مشخص» نیست. در پروژه دو نشانه متفاوت گذاشته ایم: کادر کناری برای فرزند دوم و زمینه زرد برای دومین پاراگراف، تا تفاوت شمارش روشن باشد.

کاربرد در جدول؛ شمارش را از tbody شروع کنید

برای خواناتر شدن جدول، ردیف های زوج بدنه را رنگ می کنیم. با هدف گرفتن tr های مستقیم داخل tbody، ردیف عنوان داخل thead وارد همان شمارش نمی شود. اگر جدول چند tbody داشته باشد، شمارش در هرکدام جدا شروع می شود. این انتخابگر برای جدول ساده پروژه مناسب است؛ ردیف های مخفی یا ساختارهای گروه بندی شده نیاز به بررسی جدا دارند.

tbody > tr:nth-child(even) {
  background: #e0f2fe;
}

در HTML پروژه، عنوان ستون ها و عنوان ردیف ها با th و scope مشخص شده اند. رنگ آمیزی جای ساختار معنایی جدول را نمی گیرد. برای ساخت جدول مناسب، درس جدول های HTML را مرور کنید و برای انتخاب رنگی که نوشته را خوانا نگه دارد، به درس رنگ در CSS برگردید.

عیب یابی انتخابگر nth-child در CSS

ابتدا در Inspect، والد واقعی و فرزندان مستقیم آن را ببینید. سپس شماره عناصر را بشمارید و وجود عنوان یا عنصر دیگری را بررسی کنید. اگر شماره درست است اما استایل اعمال نمی شود، قوانین بازنویسی شده را بررسی کنید. nth-child نیز در محاسبه اولویت انتخابگر سهم دارد؛ برای فهم ترتیب و قدرت قوانین، درس آبشار و اولویت CSS را مرور کنید.

فاصله اشتباه هم نتیجه را تغییر می دهد. li:nth-child(2) همان li در جایگاه دوم را هدف می گیرد، اما li :nth-child(2) به عنصر داخل li مربوط می شود. اگر نمونه را از روی مقاله می نویسید، فاصله ها، دونقطه و پرانتزها را دقیق بررسی کنید؛ انتخابگر جدید را ابتدا روی یک فهرست کوچک آزمایش کنید.

پروژه عملی و تمرین درس 33

در index.html چهار بخش دارید: فهرست خدمات، جدول برنامه، نمونه شمارش مختلط و تمرین مستقل. ابتدا خروجی بخش های آماده را با توضیح بالای هر بخش مقایسه کنید. سپس یک خدمت به ابتدای فهرست اضافه کنید و ببینید جایگاه سوم و رنگ ردیف ها چگونه تغییر می کنند. این آزمایش نشان می دهد انتخابگر ساختاری به جایگاه وابسته است.

در تمرین مستقل، سه مورد اول فهرست exercise را آبی کنید، برای مورد چهارم کادر مشخص بسازید و فاصله انتهای آخرین مورد را صفر کنید. فقط همین فهرست باید تغییر کند. پاسخ در solution.css است و از ابتدا فعال نیست؛ بعد از تلاش خودتان، لینک آن را پس از style.css به head اضافه کنید و صفحه را دوباره بارگذاری کنید.

.exercise > li:nth-child(-n+3) { background: #e0f2fe; }
.exercise > li:nth-child(4) { border: 3px solid #075985; }
.exercise > li:last-child { margin-block-end: 0; }

<link rel="stylesheet" href="solution.css">

دانلود پروژه، پاسخ تمرین و راهنمای آزمایش درس 33

پرسش های متداول

شمارش nth-child از صفر شروع می شود؟

خیر؛ جایگاه اولین عنصر 1 است. صفر ممکن است در محاسبه فرمول ظاهر شود، اما هیچ فرزندی با شماره صفر انتخاب نمی شود.

آیا فاصله و خط جدید HTML در شمارش حساب می شوند؟

خیر؛ شمارش این انتخابگر میان فرزندان عنصری است. متن و توضیحات HTML جایگاه عنصری ایجاد نمی کنند.

تفاوت nth-child و nth-of-type چیست؟

اولی جایگاه میان همه فرزندان عنصری یک والد را بررسی می کند؛ دومی جایگاه میان عناصر هم نوع را می شمارد.

چرا عنصر مخفی روی رنگ ردیف های بعد اثر دارد؟

display برابر none عنصر را از ساختار HTML حذف نمی کند؛ بنابراین همچنان در شمارش جایگاه حضور دارد.

فایل پروژه پاسخ تمرین دارد؟

بله؛ فایل solution.css و راهنمای فعال کردن آن همراه HTML و CSS اصلی داخل ZIP قرار دارند.

درس بعدی دوره

اکنون می توانید فهرست ها و ردیف های تکراری را با قوانین وابسته به ساختار تنظیم کنید. در درس بعد سراغ ویژگی overflow می رویم تا محتوای بلند، کادرهای محدود و رفتار اسکرول را مدیریت کنیم؛ این موضوع برای جدول ها و بخش های کوچک صفحه کاربرد دارد.

مطالعه تکمیلی: مستند nth-child در MDN و مستند nth-of-type در MDN.