الصنف ‎:only-child

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

الصنف الزائف ‎:only-child‎ في CSS (أي pseudo-class) يُطابِق عنصرًا لا يملك أيّة عناصر أخوة (siblings)، وهذا المُحدِّد يماثل ‎:first-child:last-child أو ‎‎:nth-‎child(1):nth-last-child(1)‎‎‎ لكن درجة التحديد له أقل.

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

أمثلة

لاحظ كيف استخدمنا الصنف الزائف ‎:only-child‎ في المثال الآتي:
<main>
  <div>
    <i>أنا ابن وحيد</i>
  </div>

  <div>
    <i>لدي إخوة</i><br>
    <b>وانا كذلك!</b><br>
    <span>لدي أيضًا أشقاء ، <span> ولكن هذا هو الطفل الوحيد.</span></span>
  </div>
</main>
شيفرة CSS:
main :only-child {
  color: red;
}
مثال آخر مع استخدام القوائم غير المرتبة <ul> والمرتبة <ol>:
<ol>
  <li>First
    <ul>
      <li>هذه القائمة لديها عنصر واحد فقط
    </ul>
  </li>
  <li>Second
    <ul>
      <li>هذه القائمة لديها ثلاثة عناصر
      <li>هذه القائمة لديها ثلاثة عناصر
      <li>هذه القائمة لديها ثلاثة عناصر
    </ul>
  </li>
</ol>
شيفرة CSS:
li li {
  list-style-type: disc;
}
li:only-child {
  color: red;
  list-style-type: square;
}

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

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

انظر أيضًا

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

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