الفرق بين المراجعتين ل"CSS/:nth-last-child"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
سطر 31: | سطر 31: | ||
<tbody> | <tbody> | ||
<tr> | <tr> | ||
− | <td> | + | <td>السطر الأول</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>السطر الثاني</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>السطر الثالث</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>السطر الرابع</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>السطر الخامس</td> |
</tr> | </tr> | ||
</tbody> | </tbody> | ||
سطر 81: | سطر 81: | ||
|} | |} | ||
− | ==مصادر ومواصفات== | + | ==انظر أيضًا== |
+ | * صفحة الصنف الزائف <code>[[CSS/:first-child|first-child:]]</code> الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements). | ||
+ | * صفحة الصنف الزائف <code>[[CSS/:last-child|last-child:]]</code> الذي يُمثِّل آخر عنصر في مجموعة من العناصر الأخوة (sibling elements). | ||
+ | * صفحة الصنف الزائف <code>[[CSS/:nth-of-type|nth-of-type:]]</code> الذي يُطابِق عنصرًا أو أكثر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings). | ||
+ | |||
+ | == مصادر ومواصفات == | ||
*مسودة [https://drafts.csswg.org/selectors-4/#nth-last-child-pseudo Selectors Level 4]. | *مسودة [https://drafts.csswg.org/selectors-4/#nth-last-child-pseudo Selectors Level 4]. | ||
*مواصفة [https://drafts.csswg.org/selectors-3/#nth-last-child-pseudo Selectors Level 3]. | *مواصفة [https://drafts.csswg.org/selectors-3/#nth-last-child-pseudo Selectors Level 3]. | ||
− | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
− | [[تصنيف:CSS Selectors]] | + | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] |
− | [[تصنيف:CSS pseudo-class]] | + | [[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 19:32، 24 أكتوبر 2018
الصنف الزائف :nth-last-child()
في CSS (أي pseudo-class) يُطابِق عنصرًا أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings)، وذلك بدءًا من نهاية المجموعة.
هذا المُحدِّد يُحدِّد جميع العناصر التي ترتيبها هو الرابع ضمن أي مجموعة من الأخوة، ويبدأ العد من آخر عنصر في المجموعة:
:nth-last-child(4n) {
color: lime;
}
ملاحظة: هذا الصنف الزائف يماثل الصنف :nth-child
إلا أنه يبدأ عدّ العناصر من النهاية إلى البداية، عكس الصنف :nth-child
الذي يبدأ العد من البداية إلى النهاية.
يقبل هذا الصنف الزائف وسيطًا واحدًا يمُثِّل نمط مُطابقة العناصر:
- الكلمة المحجوزة
odd
تُمثِّل العناصر التي يكون ترتيبها بين إخوتها فرديًا، أي 1 و 3 و 5 ...إلخ. ويبدأ العد من البداية إلى النهاية. - الكلمة المحجوزة
even
تُمثِّل العناصر التي يكون ترتيبها بين إخوتها زوجيًا، أي 2 و 4 و 6 ...إلخ. ويبدأ العد من البداية إلى النهاية. - الشكل
<An+B>
يُمثِّل العناصر التي لها ترتيبٌ رقميٌ بين أخوتها يُطابِق النمطAn+B
، وذلك لكل قيمة موجبة أو تساوي الصفر للمتغيرn
؛ لاحظ أنَّ فهرس أوّل عنصر هو1
، ويجب أن تكون قيمةA
وB
عدديةً<integer>
. ويبدأ العد من البداية إلى النهاية.
:nth-last-child( <nth> )
حيث:
<nth> = <an-plus-b> | even | odd
أمثلة
- المُحدِّد
tr:nth-last-child(odd)
أوtr:nth-last-child(2n+1)
يمثِّل الأسطر الفردية في جدول HTML، أي 1 و 3 و 5 ...إلخ. ويبدأ العد من البداية إلى النهاية. - المُحدِّد
tr:nth-last-child(even)
أوtr:nth-last-child(2n)
يمثِّل الأسطر الزوجية في جدول HTML، أي 2 و 4 و 6 ...إلخ. ويبدأ العد من البداية إلى النهاية. - المُحدِّد
:nth-last-child(5n)
يمثِّل العناصر التي ترتيبها من مضاعفات العدد 5، أي 5 و 10 و 15 ...إلخ. ويبدأ العد من البداية إلى النهاية. - المُحدِّد
:nth-last-child(3n+4)
يمثِّل العناصر التي ترتيبها يخضع للسلسة 4 و 7 و 10 و 13 ...إلخ. ويبدأ العد من البداية إلى النهاية. - المُحدِّد
:nth-last-child(-n+3)
يمثِّل آخر ثلاثة عناصر. - المُحدِّد
p:nth-last-child(n)
يمثِّل جميع عناصر<p>
وهو يكافئ المُحدِّد البسيط p. - المُحدِّد
p:nth-last-child(1)
أوp:nth-last-child(0n+1)
يمثِّل أوّل عنصر<p>
بين أخوته ويبدأ العد من البداية إلى النهاية، وهو يكافئ المُحدِّد:last-child
.
لاحظ كيف استخدمنا الصنف الزائف :nth-last-child()
في المثال الآتي:
<table>
<tbody>
<tr>
<td>السطر الأول</td>
</tr>
<tr>
<td>السطر الثاني</td>
</tr>
<tr>
<td>السطر الثالث</td>
</tr>
<tr>
<td>السطر الرابع</td>
</tr>
<tr>
<td>السطر الخامس</td>
</tr>
</tbody>
</table>
شيفرة CSS:
table {
border: 1px solid blue;
}
tr:nth-last-child(-n+3) {
background-color: pink;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 4.0 | 3.5 | 9.0 | 9.5 | 3.1 |
عدم الحاجة إلى وجود عنصر أب | 57 | 51 | ؟ | 44 | ؟ |
انظر أيضًا
- صفحة الصنف الزائف
first-child:
الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements). - صفحة الصنف الزائف
last-child:
الذي يُمثِّل آخر عنصر في مجموعة من العناصر الأخوة (sibling elements). - صفحة الصنف الزائف
nth-of-type:
الذي يُطابِق عنصرًا أو أكثر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).
مصادر ومواصفات
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.