انتخاب اولین و آخرین فرزند در CSS

در زبان برنامه نویسی CSS، ممکن است بخواهیم به اولین یا آخرین فرزندِ یک عنصر، استایل هایی را اعمال کنیم. یک مثال ساده، این است که به یک دسته از لینک های هدایتی در قالب چند تب استایل اضافه کنیم و  بخواهیم به اولین یا آخرین تب(یا هردو) برخی جزئیات را اضافه کنیم. در گذشته، این کار با اعمال کلاس های خاص به آن عناصر انجام می شد. اما اکنون می توانیم این کار را با استفاده از شبه کلاس ها(pseudo-classes) انجام دهیم. 

از شبه کلاس :first-child برای انتخاب عناصری که اولین فرزند از دیگر عناصر هستند، استفاده می شود. کدهای زیر را در نظر بگیرد:

<div>
<p>مهمترین کتاب های مولانا</p>
<ul>
  <li>مثنوی معنوی</li>
  <li>کتاب <strong>دیوان شمس</strong></li>
  <li>فیه ما فیه</li>
</ul>
<p>
کتاب های مولانا را <em>دست کم</em> نگیرید.
</p>
</div>

در این مثال، عناصری که اولین فرزند محسوب می شوند، عبارتند از: اولین p و اولین li و عناصر strong و em که همه ی آنها اولین فرزند از عنصر والد خود هستند. فرض کنید دو دستور CSS زیر را داشته باشیم:

p:first-child {color:red;}
li:first-child {color:blue;}

اولین دستور، باعث می شود هر عنصر p که اولین فرزند از یک عنصر دیگر باشد، انتخاب شود و به رنگ قرمز درآید. دومین دستور، باعث می شود هر عنصر li که اولین فرزند از یک عنصر دیگر است(که در HTML باید یا ol باشد یا ul) انتخاب شود. همان طور که ذکر شد، متداول ترین خطا این است که فرض کنیم یک سلکتور مانند p:first-child اولین فرزندِ یک عنصر p را انتخاب می کند. 

به یاد داشته باشید که طبیعت شبه کلاس ها، وصل کردن یک نوع کلاس توخالی(phantom class) به عنصری که با این شبه کلاس ها مرتبط شده است، می باشد. اگر می خواهید از کلاس های حقیقی برای انجام این کار استفاده کنید، به صورت زیر است:

<div>
<p class="first-child">مهمترین کتاب های مولانا</p>
<ul>
  <li class="first-child">مثنوی معنوی</li>
  <li>کتاب <strong class="first-child">دیوان شمس</strong></li>
  <li>فیه ما فیه</li>
</ul>
<p>
کتاب های مولانا را <em class="first-child">دست کم</em> نگیرید.
</p>
</div>

بنابراین، اگر می خواهید عناصر em که اولین فرزند از دیگر عناصر هستند را انتخاب کنید، باید به صورت زیر عمل کنید:

em:first-child

برعکسِ دستورِ :first-child ،دستورِ :last-child است. اگر مثال قبلی را در نظر بگیریم و فقط شبه کلاس ها را تغییر دهیم، نتیجه به صورت زیر خواهد بود:

<div>
<p class="first-child">مهمترین کتاب های مولانا</p>
<ul>
  <li class="first-child">مثنوی معنوی</li>
  <li>کتاب <strong class="first-child">دیوان شمس</strong></li>
  <li>فیه ما فیه</li>
</ul>
<p>
کتاب های مولانا را <em class="first-child">دست کم</em> نگیرید.
</p>
</div>

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

اگر می خواهید عنصر em که در درون آخرین پاراگراف قرار دارد را انتخاب کنید، می توانید از سلکتور زیر استفاده کنید:

p:last-child em

کد CSS بالا، هر عنصر em که فرزند یک عنصر p است، به طوری که این عنصر p ، خودش آخرین فرزند از یک عنصر دیگر است را انتخاب می کند. جالب است بدانید که ما می توانیم این دو شبه کلاس را ترکیب کنیم تا یک نسخه از :onlychild را ایجاد کنیم. دستورات زیر، عناصر مشابهی را گزینش یا انتخاب می کنند:

p:only-child {color: red;}
p:first-child:last-child {background-color: red;}

در هر دو حالت، پاراگراف ها به رنگ قرمز و رنگ پس زمینه(background color) نیز قرمز می شود(اما این کار ایده ی خوبی نیست).