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