الفرق بين المراجعتين ل"CSS/:last-of-type"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 13: | سطر 13: | ||
لاحظ كيف ستُنسَّق آخر فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> من بين العناصر الأخوة: | لاحظ كيف ستُنسَّق آخر فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> من بين العناصر الأخوة: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
− | <h2> | + | <h2>الترويسة</h2> |
− | <p> | + | <p>النص 1</p> |
− | <p> | + | <p>النص 2</p> |
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
p:last-of-type { | p:last-of-type { | ||
سطر 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"> | ||
سطر 50: | سطر 51: | ||
|3.2 | |3.2 | ||
|} | |} | ||
+ | ==انظر أيضًا== | ||
+ | *صفحة الصنف الزائف <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). | ||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
*مسودة [https://drafts.csswg.org/selectors-4/#last-of-type-pseudo Selectors Level 4]. | *مسودة [https://drafts.csswg.org/selectors-4/#last-of-type-pseudo Selectors Level 4]. | ||
*مواصفة [https://drafts.csswg.org/selectors-3/#last-of-type-pseudo Selectors Level 3]. | *مواصفة [https://drafts.csswg.org/selectors-3/#last-of-type-pseudo Selectors Level 3]. | ||
− | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
− | [[تصنيف:CSS Selectors]] | + | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] |
− | [[تصنيف:CSS pseudo-class]] | + | [[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 14:20، 24 أكتوبر 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 |
انظر أيضًا
- صفحة الصنف الزائف
first-child:
الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements). - صفحة الصنف الزائف
last-child:
الذي يُمثِّل آخر عنصر في مجموعة من العناصر الأخوة (sibling elements). - صفحة الصنف الزائف
nth-child:
الذي يُطابِق عنصرًا أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).
مصادر ومواصفات
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.