شبه کلاس first-child: در CSS

:first-child CSS Pseudo-class

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

نحوه نوشتار

/* انتخاب اولین انتخابگر
<p> از میان تمام انتخابگرهای خویشاوند تگ */
p:first-child {
  color: lime;
}

در مثال زیر عملکرد شبه کلاس first-child: را میبینیم:

html

<div>
  <p>این متن انتخاب می شود.</p>
  <p>این متن انتخاب نمی شود.</p>
</div>

<div>
  <h3>این متن جزو انتخابگرهای 'p' نمی باشد.</h3>
  <p> این متن انتخاب نمی شود چون اولین عنصر فرزند نیست.</p>
</div>

css

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

مشاهده و ویرایش کد در حالت تمام صفحه

در مثال دیگری از این شبه کلاس میبینیم:

html

<ul>
  <li>شماره۱ </li>
  <li>شماره ۲</li>
  <li>شماره ۳
    <ul>
      <li>شماره ۳.۱</li>
      <li>شماره ۳.۲</li>
      <li>شماره ۳.۳</li>
    </ul>
  </li>
</ul>

css

 ul li {
   color: blue;
}
ul li:first-child {
   color: red;
   font-weight: bold;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.