پایان دوران :nth-child()! آشنایی با sibling-index() و sibling-count() در CSS

پایان دوران :nth-child()! آشنایی با sibling-index() و sibling-count() در CSS

با توابع جدید sibling-index() و sibling-count() در CSS آشنا شوید! این دو تابع تازه‌نفس، راهی کاملاً جدید و هموارتر برای شمارش عناصر خواهر و برادر (Sibling) در یک درخت DOM ارائه می‌دهند و قرار است یکی از قدیمی‌ترین دردسرهای طراحان وب را برای همیشه حل کنند.

تصور کنید می‌خواهید افکت آبشاری پلکانی (Staggered Cascade) را پیاده‌سازی کنید؛ تا دیروز مجبور بودید با قوانین پرسر و صدای :nth-child() کلنجار بروید یا به راهکارهای جاوااسکریپتی متوسل شوید. اما حالا تنها با یک خط کد CSS می‌توانید این افکت جذاب را خلق کنید؛ بدون نیاز به قوانین پیچیده و بدون حتی یک خط جاوااسکریپت.

نکته جذاب دیگر این است که این توابع در هر مقیاسی به‌خوبی کار می‌کنند. چه فقط ۵ آیتم داشته باشید و چه ۵٬۰۰۰ آیتم، عملکرد آن‌ها ثابت می‌ماند. همین مقیاس‌پذیری، آن‌ها را به ابزاری ایده‌آل برای پروژه‌های بزرگ و اپلیکیشن‌های سنگین تبدیل می‌کند.

منبع: SmashingMagazine (مشاهده متن اصلی)