CSS/:only-child

الصنف الزائف ‎: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 am a lonely only child.</i>
  </div>

  <div>
    <i>I have siblings.</i><br>
    <b>So do I!</b><br>
    <span>I also have siblings, <span>but this is an only child.</span></span>
  </div>
</main>

شيفرة CSS:

main :only-child {
  color: red;
}

مثال آخر مع استخدام القوائم غير المرتبة <ul> والمرتبة <ol>:

<ol>
  <li>First
    <ul>
      <li>This list has just one element.
    </ul>
  </li>
  <li>Second
    <ul>
      <li>This list has three elements.
      <li>This list has three elements.
      <li>This list has three elements.
    </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	؟

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

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