ПостПолучаем порядковый номер элемента прямо в CSS!

Получаем порядковый номер элемента прямо в CSS! Для каскадной анимации списка часто приходится передавать индекс из JavaScript или прописывать :nth-child() для каждого элемента. <div style={{ "--i": index }} /> В CSS появились функции sibling-index() и sibling-count(): первая возвращает позицию элемента среди всех дочерних элементов родителя, начиная с 1, вторая — их общее количество. Поэтому задержку от 0ms можно вычислить автоматически: .item { animation-delay: calc((sibling-index() - 1) * 80ms); } Добавили десятый элемент — ничего менять не нужно. Его индекс вычислится из DOM автоматически. Общее количество элементов тоже доступно прямо в выражении: .item { --total: sibling-count(); } Это можно использовать для stagger-анимаций, распределения элементов и вычислений, которые раньше требовали --i, :nth-child() или генерации CSS из JavaScript. 🔥 Функции учитывают все соседние элементы одного родителя, а не только элементы с классом .item. Поддержка пока ограничена, поэтому перед использованием нужно проверить целевые браузеры. 📣 Code Ready | #совет