first-child:

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

فرض کنید HTML به صورت زیر است:

<article>
 <p>فرزند اول عنصر مقاله</p>
 <p>فرزند دوم</p>
 <p></p>
 <p></p>
 <p></p>
</article>

در اینجا اولین عنصر پاراگراف (تگ p) اولین فرزند عنصر article می باشد. پس استایل زیر بر روی آن اعمال می شود:

p:first-child {
  color: green;
}

اما کد بالا بر روی HTML زیر اعمال نمی شود و اولین پاراگراف سبز نمی شود. چون عنصر پاراگراف در سطح خود اولین فرزند نمی باشد بلکه این عنصر h2 است که اولین فرزند در آن سطح است.

<article>
 <h2>اولین فرزند</h2>
 <p>دموین فرزند</p>
 <p></p>
 <p></p>
 <p></p>
</article>

درست است که پاراگراف اولین عنصر سطح نیست ولی اولین عنصر در نوع خودش در آن سطح هست پس برای انتخاب آن می توان از first-of-type: استفاده کرد.

See the Pen :first-child by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگرها

first-child: در مرورگرهای کروم, فایرفاکس, اپرا +9.5 و اینترنت اکسپلورر +7 و همچنین در اندروید و iOS کار می کند.

نکته: در IE7 وقتی عناصر به صورت پویا به وجود می آیند و اضافه می شوند استایل به روز نمی شود. در IE8 وقتی عنصر به صورت پویا اضافه شود اگر روی یک لینک کلیک کنیم استایل بر روی اولین فرزند اعمال نمی شود تا زمانی که لینک از حالت focus خارج شود.