الصنف ‎:first-child

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

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

p:first-child {
  color: lime;
}
ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد:
:first-child

أمثلة

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

<div>
  <p>هذا النص محدد</p>
  <p>هذا النص غير محدد</p>
</div>

<div>
  <h2>هذا النص غير محدد إنه عنصر `p`.</h2>
  <p>هذا النص غير محدد</p>
</div>
شيفرة CSS:
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
مثال عن تحديد أوّل عنصر <li> ضمن قائمة غير مرتبة <ul>:
<ul>
  <li>العنصر 1</li>
  <li>العنصر 2</li>
  <li>العنصر 3
    <ul>
      <li>العنصر 3.1</li>
      <li>العنصر 3.2</li>
      <li>العنصر 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 ؟

انظر أيضًا

  • صفحة الصنف الزائف first: الذي يُمثِّل أوّل صفحة من المستند عند طباعته.
  • صفحة الصنف الزائف empty: الذي يُمثِّل أي عنصر ليس له أبناء.
  • صفحة الصنف الزائف first-of-type: الذي يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.

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