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

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
سطر 12: سطر 12:
 
لاحظ كيف استخدمنا الصنف الزائف <code>‎:only-of-type</code> في المثال الآتي:<syntaxhighlight lang="html">
 
لاحظ كيف استخدمنا الصنف الزائف <code>‎:only-of-type</code> في المثال الآتي:<syntaxhighlight lang="html">
 
<main>
 
<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>
 
   </div>
 
</main>
 
</main>

مراجعة 10:01، 11 أكتوبر 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 ؟

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