CSS/:first-child

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

المُحدِّد الآتي سيُحدِّد أوّل عنصر <p> من بين أخوته:

p:first-child {
  color: lime;
}

ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد:

:first-child

أمثلة

لاحظ كيف سيُحدَّد أوّل عنصر <p> من بين العناصر الأخوة له:

<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>

شيفرة CSS:

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

مثال عن تحديد أوّل عنصر <li> ضمن قائمة غير مرتبة <ul>:

<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>

شيفرة CSS:

ul li {
  color: blue;
}

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

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0	3.0	7	9.5	4
عدم الحاجة إلى وجود عنصر أب	57	51	؟	44	؟

مصادر ومواصفات

• مسودة Selectors Level 4.
• مواصفة Selectors Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.