با توابع جدید CSS یعنی sibling-index() و sibling-count() آشنا شوید؛ دو ابزار قدرتمند که قرار است روش برخورد ما با شمارش و چیدمان ریاضی عناصر در DOM را کاملاً دگرگون کنند. این توابع به توسعه‌دهندگان اجازه می‌دهند بدون نیاز به هک‌های پیچیده، شماره هر عنصر میان خواهر-برادرهایش و تعداد کل آن‌ها را به صورت ریاضی و در لحظه محاسبه کنند.
یکی از جذاب‌ترین کاربردهای این توابع، ایجاد افکت آبشاری پلکانی (Staggered Cascade) تنها با یک خط کد CSS است؛ چیزی که تا دیروز نیازمند قواعد طولانی :nth-child() یا راهکارهای جاوا اسکریپتی خسته‌کننده بود. حالا می‌توانید انیمیشن‌های متوالی، چیدمان‌های شبکه‌ای و حالت‌های پویا را با کمترین کد و بالاترین خوانایی پیاده کنید.
فرقی نمی‌کند لیست شما پنج آیتم داشته باشد یا پنج هزار آیتم؛ این توابع به صورت بومی در مرورگر اجرا می‌شوند و عملکردی یکدست و سریع ارائه می‌دهند. برای پروژه‌هایی که با محتوای پویا و لیست‌های طولانی سروکار دارند، این یعنی کد تمیزتر، نگهداری ساده‌تر و حذف کامل وابستگی به اسکریپت‌های جانبی.