عرض مصدر CSS/:first-child

<noinclude>{{DISPLAYTITLE: الصنف <code>‎:first-child</code>}}</noinclude>
الصنف الزائف <code>‎:first-child</code> في CSS (أي pseudo-class) يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).

المُحدِّد الآتي سيُحدِّد أوّل عنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> من بين أخوته:
<syntaxhighlight lang="css">
p:first-child {
  color: lime;
}
</syntaxhighlight>ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا.

الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
:first-child
</syntaxhighlight>

== أمثلة ==
لاحظ كيف سيُحدَّد أوّل عنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> من بين العناصر الأخوة له:
<syntaxhighlight lang="html">
<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
</syntaxhighlight>مثال عن تحديد أوّل عنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> ضمن قائمة غير مرتبة <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>:<syntaxhighlight lang="html">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|4.0
|3.0
|7
|9.5
|4
|-
!عدم الحاجة إلى وجود عنصر أب
|57
|51
|؟
|44
|؟
|}
==مصادر ومواصفات==
*مسودة [https://drafts.csswg.org/selectors-4/#first-child-pseudo Selectors Level 4].
*مواصفة [https://drafts.csswg.org/selectors-3/#first-child-pseudo Selectors Level 3].
*مواصفة ‎[http://www.w3.org/TR/CSS2/selector.html#first-child CSS Level 2 (Revision 1)]‎.
[[تصنيف:CSS]]
[[تصنيف:CSS Selectors]]
[[تصنيف:CSS pseudo-class]]