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

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

الصنف الزائف ‎: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).

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

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

@@ سطر 14: / سطر 14: @@
 <main>
    <div>
-     <i>I am a lonely only child.</i>
+     <i>أنا ابن وحيد</i>
    </div>
    <div>
-     <i>I have siblings.</i><br>
+     <i>لدي إخوة</i><br>
-     <b>So do I!</b><br>
+     <b>وانا كذلك!</b><br>
-     <span>I also have siblings, <span>but this is an only child.</span></span>
+     <span>لدي أيضًا أشقاء ، <span> ولكن هذا هو الطفل الوحيد.</span></span>
    </div>
 </main>
@@ سطر 31: / سطر 31: @@
    <li>First
      <ul>
-       <li>This list has just one element.
+       <li>هذه القائمة لديها عنصر واحد فقط
      </ul>
    </li>
    <li>Second
      <ul>
-       <li>This list has three elements.
+       <li>هذه القائمة لديها ثلاثة عناصر
-       <li>This list has three elements.
+       <li>هذه القائمة لديها ثلاثة عناصر
-       <li>This list has three elements.
+       <li>هذه القائمة لديها ثلاثة عناصر
      </ul>
    </li>
-<ol>
+</ol>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 li li {
@@ سطر 76: / سطر 76: @@
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:first-child|first-child:]]</code> الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
+* صفحة الصنف الزائف <code>[[CSS/:last-child|last-child:]]</code> الذي يُمثِّل آخر عنصر في مجموعة من العناصر الأخوة (sibling elements).
+* صفحة الصنف الزائف <code>[[CSS/:nth-child|nth-child:]]</code> الذي يُطابِق عنصرًا أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).
+* صفحة الصنف الزائف <code>[[CSS/:nth-of-type|nth-of-type:]]</code> الذي  يُطابِق عنصرًا أو أكثر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).
+== مصادر ومواصفات ==
 *مسودة [https://drafts.csswg.org/selectors-4/#only-child-pseudo Selectors Level 4].
 *مواصفة [https://drafts.csswg.org/selectors-3/#only-child-pseudo Selectors Level 3].