الفرق بين المراجعتين لصفحة: «CSS/:only-child»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
سطر 41: | سطر 41: | ||
</ul> | </ul> | ||
</li> | </li> | ||
<ol> | </ol> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
li li { | li li { |
مراجعة 16:30، 3 أكتوبر 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 | ؟ |
مصادر ومواصفات
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.