sibling-index() и sibling-count() — Рома Ахмадуллин

В CSS появилась возможность работать с порядковым номером элемента внутри родителя благодаря двум новым функциям sibling-index() и sibling-count().

`sibling-index()`

Вернёт порядковый номер элемента относительно соседних внутри родителя. Счёт начинается с единицы.

ul li {
    /* вернёт
       1 для первого,
       2 для второго
       и т.д.
    */
    width: calc(sibling-index() * 10px);
}

`sibling-count()`

Вернёт число элементов внутри родителя.

ul li {
    /* вернёт 10, если элементов внутри списка 10 штук */
    width: calc(100% / sibling-count());
}

Обе функции возвращают ответ в виде целого числа, а не строкового значения.

Они могут пригодиться для:

создания пошаговых анимаций (спиннер один, спиннер два, слайд-наложение фона на картинку);
динамического выбора цвета (демка);
расположения элементов (цветной круг из точек, радиальное меню, круговой слайдер);
задания динамического размера элементам (демка);
динамической типографики (демка).

Функции пока экспериментальные и доступны только в Chrome 138+, спеку можно почитать тут.