الفرق بين المراجعتين لصفحة: «CSS/:only-child»
< CSS
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
سطر 79: | سطر 79: | ||
*مسودة [https://drafts.csswg.org/selectors-4/#only-child-pseudo Selectors Level 4]. | *مسودة [https://drafts.csswg.org/selectors-4/#only-child-pseudo Selectors Level 4]. | ||
*مواصفة [https://drafts.csswg.org/selectors-3/#only-child-pseudo Selectors Level 3]. | *مواصفة [https://drafts.csswg.org/selectors-3/#only-child-pseudo Selectors Level 3]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Selectors]] | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS pseudo-class]] | [[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]] |
مراجعة 15:34، 28 يناير 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 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.