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

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

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

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

p:last-child {
  color: lime;
}

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

:last-child

أمثلة

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

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

<div>
  <h2>هذا النص غير محدد إنه عنصر `p`.</h2>
  <p>هذا النص غير محدد</p>
</div>

شيفرة CSS:

p:last-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:last-child {
  border: 1px solid red;
  color: red;
}

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

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

انظر أيضًا

صفحة الصنف الزائف first-child: الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
صفحة الصنف الزائف nth-child: الذي يُطابِق عنصرًا أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).

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

مسودة Selectors Level 4.
مواصفة Selectors Level 3.

@@ سطر 76: / سطر 76: @@
 |؟
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:first-child|first-child:]]</code> الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
+* صفحة الصنف الزائف <code>[[CSS/:nth-child|nth-child:]]</code> الذي يُطابِق عنصرًا أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).
+== مصادر ومواصفات ==
 *مسودة [https://drafts.csswg.org/selectors-4/#last-child Selectors Level 4].
 *مواصفة [https://drafts.csswg.org/selectors-3/#last-child Selectors Level 3].