الفرق بين المراجعتين ل"CSS/:last-of-type"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
سطر 23: | سطر 23: | ||
</syntaxhighlight>لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ [[CSS/Universal Selector|المُحدِّد العام]] <code>*</code> سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:<syntaxhighlight lang="html"> | </syntaxhighlight>لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ [[CSS/Universal Selector|المُحدِّد العام]] <code>*</code> سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:<syntaxhighlight lang="html"> | ||
<article> | <article> | ||
− | <div> | + | <div>هذا عنصر `div` الأول</div> |
− | <div> | + | <div>هذا <span>المتداخل`span` هو الأول</span>!</div> |
− | <div> | + | <div>هذا <em>المتداخل`em` هو الأول</em>, لكن هذا <em>المتداخل`em` هو الأخير</em>!</div> |
− | <b> | + | <div>هذا <span>المتداخل`span` له تصميم</span>!</div> |
− | <div> | + | <b>هذا `b` مؤهل</b> |
+ | <div>هذا آخر عنصر `div`.</div> | ||
</article> | </article> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> |
مراجعة 16:13، 3 أكتوبر 2018
الصنف الزائف :last-of-type
في CSS (أي pseudo-class) يُمثِّل آخر عنصر من نوعه في مجموعة من العناصر الأخوة.
p:last-of-type {
color: lime;
}
ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد:
:last-of-type
أمثلة
لاحظ كيف ستُنسَّق آخر فقرة <p>
من بين العناصر الأخوة:
<h2>الترويسة</h2>
<p>النص 1</p>
<p>النص 2</p>
شيفرة CSS:
p:last-of-type {
color: red;
font-style: italic;
}
لاحظ كيف يمكن استخدام هذا المُحدِّد على العناصر المتشعبة، تذكَّر أنَّ المُحدِّد العام *
سيُستخدَم ضمنيًا عند عدم التصريح عن مُحدِّد:
<article>
<div>هذا عنصر `div` الأول</div>
<div>هذا <span>المتداخل`span` هو الأول</span>!</div>
<div>هذا <em>المتداخل`em` هو الأول</em>, لكن هذا <em>المتداخل`em` هو الأخير</em>!</div>
<div>هذا <span>المتداخل`span` له تصميم</span>!</div>
<b>هذا `b` مؤهل</b>
<div>هذا آخر عنصر `div`.</div>
</article>
شيفرة CSS:
article :last-of-type {
background-color: pink;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 3.5 | 9.0 | 9.5 | 3.2 |
مصادر ومواصفات
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.