الفرق بين المراجعتين ل"CSS/:first-child"

المراجعة الحالية بتاريخ 21:08، 19 أكتوبر 2018

الصنف الزائف ‎: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: الذي يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.

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

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

@@ سطر 77: / سطر 77: @@
 |؟
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:first|first:]]</code> الذي يُمثِّل أوّل صفحة من المستند عند طباعته.
+* صفحة الصنف الزائف <code>[[CSS/:empty|empty:]]</code> الذي يُمثِّل أي عنصر ليس له أبناء.
+* صفحة الصنف الزائف <code>[[CSS/:first-of-type|first-of-type:]]</code> الذي يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.
+== مصادر ومواصفات ==
 *مسودة [https://drafts.csswg.org/selectors-4/#first-child-pseudo Selectors Level 4].
 *مواصفة [https://drafts.csswg.org/selectors-3/#first-child-pseudo Selectors Level 3].