English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-last-child() 这个CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素。注意: 这个伪类和 :nth-child 基本一致, 但它是从结尾计数, 而不是从开始计数。
指定table的tr背景色和字体效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
table {
border: 1px solid blue;
}
/* يُختار الثلاثة عناصر الأخيرة فقط */
tr:nth-last-child(-n+3) {
background-color: pink;
}
/* يُختار كل عنصر من الثانية إلى الأخيرة */
tr:nth-last-child(n+2) {
color: blue;
}
/* يُختار العنصر الثاني الأخير فقط */
tr:nth-last-child(2) {
font-weight: 600;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>السطر الأول</td>
</tr>
<tr>
<td>السطر الثاني</td>
</tr>
<tr>
<td>السطر الثالث</td>
</tr>
<tr>
<td>السطر الرابع</td>
</tr>
<tr>
<td>السطر الخامس</td>
</tr>
</tbody>
</table>
</body>
</html>الاختبار ألق نظرة ‹/›اختصار :nth-last-child(n) يُناسب كل عنصر ينتمي إلى العنصر ويكون هو الابن الرقمي N من بين الأبناء، بغض النظر عن نوع العنصر، ويُحسب من العنصر الأخير.
nيمكن أن يكون الرقم أو الكلمة المفتاحية أو الصيغة.
نصيحة: انظر إلى:nth-last-of-type() الاختصار. يُناسب هذا الاختصار العنصر التالي الأخير من بين العناصر الهيكلية في العنصر الأم.
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(7)
يُمثل العنصر السابع الأخير.
:nth-last-child(5n)
يُمثل العناصر التالية: 5،10،15،و هكذا.
:nth-last-child(3n+4)
يُمثل العناصر التالية: 4،7،10،13،و هكذا.
:nth-last-child(-n+3)
يُمثل الثلاثة عناصر الأخيرة في مجموعة الأخوة.
p:nth-last-child(n) أو p:nth-last-child(n+1)
يُمثل كل عنصر <p> في مجموعة الأخوة. هذا هو نفسه مثل اختصار p بسيط.
p:nth-last-child(1) أو p:nth-last-child(0n+1)
يُمثل جميع العناصر الموجودة في أقسام الأخوة في الموضع الأخير <p> . هذا هو نفسه مثل اختصار :last-child.
الرقم في الجدول يوضح إصدار أول متصفح يدعم هذه الخاصية.
| محقس | |||||
|---|---|---|---|---|---|
| :nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
العدد المزدوج والغير مزدوج يمكن استخدامهما ككلمات مفتاحية لتحديد الأطفال الذين يحملون معلمات مكررة كاملة تساوي 2 أو 1.
في هذا المثال، قمنا بتحديد لون خلفية مختلف لكل عنصر <p> العكسي المزدوج والغير مزدوج:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
p:nth-last-child(odd)
{
background:#ff0000;
}
p:nth-last-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<p>الفقرة الأولى.</p>
<p>الفقرة الثانية.</p>
<p>الفقرة الثالثة.</p>
<p><b>النصيحة:</b> متصفح Internet Explorer 8 وأولى إصداراته لا يدعم محسسة :nth-last-child().</p>
</body>
</html>الاختبار ألق نظرة ‹/›يُ�述 بالمعادلة (an + b). a يمثل حجم التكرار، N هو معدل (يبدأ من 0)، وb هو مقدار التباين.
في هذا المثال، قمنا بتحديد لون الخلفية لبعض عناصر <p> التي لها معلمات مكررة كاملة تساوي 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
p:nth-last-child(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>هذا هو العنوان</h1>
<p>الفقرة الأولى.</p>
<p>الفقرة الثانية.</p>
<p>الفقرة الثالثة.</p>
<p>الفقرة الرابعة.</p>
<p>الفقرة الخامسة.</p>
<p>الفقرة السادسة.</p>
<p>الفقرة السابعة.</p>
<p>الفقرة الثامنة.</p>
<p>الفقرة التاسعة.</p>
<p><b>النصيحة:</b> متصفح Internet Explorer 8 وأولى إصداراته لا يدعم محسسة :nth-last-child().</p>
</body>
</html>الاختبار ألق نظرة ‹/›