الفرق بين المراجعتين ل"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> | + | <div>أنا `div` #1.</div> |
− | <p> | + | <p>أنا عنصر وحيد `p` بين عناصر الإخوة.</p> |
− | <div> | + | <div>أنا `div` #2.</div> |
− | <div> | + | <div>أنا `div` #3. |
− | <i> | + | <i>أنا الابن `i` الوحيد.</i> |
− | <em> | + | <em>أنا `em` #1.</em> |
− | <em> | + | <em>أنا `em` #2.</em> |
</div> | </div> | ||
</main> | </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-4/#only-of-type-pseudo Selectors Level 4]. | ||
*مواصفة [https://drafts.csswg.org/selectors-3/#only-of-type-pseudo Selectors Level 3]. | *مواصفة [https://drafts.csswg.org/selectors-3/#only-of-type-pseudo Selectors Level 3]. |
المراجعة الحالية بتاريخ 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.