CSS : محدد nth-last-child ()
مثال
حدد لون خلفية لكل عنصر <p> يمثل العنصر الفرعي الثاني للعنصر الأصل ، بدءًا من العنصر الفرعي الأخير:
p:nth-last-child(2)
{
background: red;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
المحدد يطابق كل عنصر يمثل الطفل التاسع ، بغض النظر عن نوعه ، من أصله ، بدءًا من آخر عنصر فرعي.:nth-last-child(n)
يمكن أن يكون n رقمًا أو كلمة رئيسية أو صيغة.
تلميح: انظر إلى : nth-last-of-type () selector لتحديد العنصر الذي يمثل الطفل n ، من نوع محدد ، من العنصر الأصل ، الذي يعد من الطفل الأخير.
الإصدار: | CSS3 |
---|
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم المحدِّد بشكل كامل.
Selector | |||||
---|---|---|---|---|---|
:nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
بنية CSS
:nth-last-child(number) {
css declarations;
}
مزيد من الأمثلة
مثال
الفردي والزوجي هي كلمات أساسية يمكن استخدامها لمطابقة العناصر الفرعية التي يكون فهرسها فرديًا أو زوجيًا.
هنا ، نحدد لونين مختلفين للخلفية للعناصر الفردية والزوجية ، بدءًا من الطفل الأخير:
p:nth-last-child(odd)
{
background: red;
}
p:nth-last-child(even)
{
background: blue;
}
مثال
باستخدام صيغة ( أ + ب ). الوصف: يمثل a حجم دورة ، ويمثل n عدادًا (يبدأ من 0) ، ويمثل b قيمة إزاحة.
هنا ، نحدد لون الخلفية لجميع عناصر p التي يكون فهرسها من مضاعفات 3 ، اعتبارًا من الطفل الأخير:
p:nth-last-child(3n+0)
{
background: red;
}