ترتيب العنصر بين إخوته sibling-index()

الصياغة

li {
  animation-delay: calc((sibling-index() - 1) * 80ms);
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .demo-list { list-style: none; padding: 0; }
  .demo-list li {
    background: #ede9fe; margin: 4px 0; padding: 8px 12px; border-radius: 6px;
    animation: fade-up 0.4s ease both;
    animation-delay: calc((sibling-index() - 1) * 120ms);
  }
  @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
</style>
<ul class="demo-list">
  <li>عنصر أول</li>
  <li>عنصر ثانٍ</li>
  <li>عنصر ثالث</li>
  <li>عنصر رابع</li>
</ul>

أهم القيم

💡 نصائح عملية

• اطرح 1 من الناتج إن أردت تأخيرًا صفريًا للعنصر الأول: calc((sibling-index() - 1) * 100ms)
• ادمجها مع sibling-count() لعكس اتجاه التدرّج أو لحسابات نسبية أخرى

⚠️ أخطاء شائعة

• توقّع أنها تبدأ من صفر → تبدأ من 1 تمامًا مثل :nth-child()
• استخدامها بلا بديل احتياطي في مشروع يستهدف Firefox → القيمة تُهمَل بصمت فتختفي الحركة المتدرّجة بالكامل
• الخلط بينها وبين محدّد :nth-child() → sibling-index() دالة قيمة تُستخدم داخل calc()، لا محدّدًا يطابق عنصرًا بعينه

خصائص ذات صلة