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

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

الصنف الزائف ‎:only-of-type‎ في CSS (أي pseudo-class) يُطابِق عنصرًا لا يملك أيّة عناصر أخوة (siblings) من نفس نوعه.

هذا المُحدِّد يُحدِّد جميع عناصر <p> التي لا يوجد لها أخوة من النوع <p>:

p:only-of-type {
  background-color: lime;
}

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

:only-of-type

أمثلة

لاحظ كيف استخدمنا الصنف الزائف ‎:only-of-type في المثال الآتي:

<main>
  <div>أنا `div` #1.</div>
  <p>أنا عنصر وحيد `p` بين عناصر الإخوة.</p>
  <div>أنا `div` #2.</div>
  <div>أنا `div` #3.
    <i>أنا الابن `i` الوحيد.</i>
    <em>أنا `em` #1.</em>
    <em>أنا `em` #2.</em>
  </div>
</main>

شيفرة CSS:

main :only-of-type {
  color: red;
}

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

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

انظر أيضًا

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

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

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

@@ سطر 12: / سطر 12: @@
 لاحظ كيف استخدمنا الصنف الزائف <code>‎:only-of-type</code> في المثال الآتي:<syntaxhighlight lang="html">
 <main>
-   <div>I am `div` #1.</div>
+   <div>أنا `div` #1.</div>
-   <p>I am the only `p` among my siblings.</p>
+   <p>أنا عنصر وحيد `p` بين عناصر الإخوة.</p>
-   <div>I am `div` #2.</div>
+   <div>أنا `div` #2.</div>
-   <div>I am `div` #3.
+   <div>أنا `div` #3.
-     <i>I am the only `i` child.</i>
+     <i>أنا الابن `i` الوحيد.</i>
-     <em>I am `em` #1.</em>
+     <em>أنا `em` #1.</em>
-     <em>I am `em` #2.</em>
+     <em>أنا `em` #2.</em>
    </div>
 </main>
@@ سطر 50: / سطر 50: @@
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <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-of-type-pseudo Selectors Level 4].
 *مواصفة [https://drafts.csswg.org/selectors-3/#only-of-type-pseudo Selectors Level 3].