CSS-функции sibling-index() и sibling-count() заработали во всех движках

Функции возвращают номер элемента среди соседей и общее число детей и работают внутри calc().

3 сентября 2026, 14:40

Обложка: CSS-функции sibling-index() и sibling-count() заработали во всех движках

Функции sibling-index() и sibling-count() стали доступны во всех трёх основных браузерных движках: последним 18 августа их поддержал Firefox 154, а 2 сентября разработчики разобрали в r/css, что это меняет. Функции возвращают номер элемента среди соседей и общее число детей у родителя, и оба значения можно использовать в calc().

Практический смысл простой: то, что раньше делали через --i в инлайн-стиле каждого элемента или через JavaScript, теперь считает сам браузер. Ступенчатые задержки анимации в списке, ширина колонок по числу карточек, позиционирование по индексу без нумерации в разметке. По данным Web Platform DX, функции получили статус «newly available» с 18 августа 2026 года; статус «widely available» по правилам Baseline ожидается 18 февраля 2029 года, то есть старые браузеры ещё долго будут требовать запасного варианта.

Ключевые выводы

sibling-index() возвращает позицию элемента среди соседей, начиная с 1; sibling-count() возвращает число прямых детей родителя, включая текущий.
Поддержка: Chrome и Edge 138 (июнь 2025), Safari 26.2 (декабрь 2025), Firefox 154 (18 августа 2026).
Функции считают по дереву DOM, а не по flat tree; при попытке пересечь границу Shadow DOM результат может быть 0.
Типичные применения: transition-delay и animation-delay по номеру, размер элемента в зависимости от числа соседей, раскладка без JavaScript.
CSSWG допускает будущую форму с фильтром of, чтобы считать только соседей по селектору.

Как это выглядит в коде

Классический пример из обсуждения: список, где каждый следующий пункт появляется чуть позже предыдущего. Раньше для этого либо писали style="--i: 3" в каждом li, либо перечисляли :nth-child() вручную. Теперь достаточно одного правила:

			li {
  animation: fade-in 0.4s both;
  animation-delay: calc(sibling-index() * 80ms);
}

.cards > * {
  /* карточки делят ширину поровну, сколько бы их ни было */
  flex-basis: calc(100% / sibling-count());
}

Обе функции возвращают целое число без единиц, поэтому умножение на 80ms или на 100px внутри calc() работает как с обычной переменной. В спецификации CSS Values and Units Level 5 их называют tree-counting functions, функциями подсчёта по дереву.

Где функции ведут себя не так, как ожидается

Считается дерево DOM, а не flat tree: слоты и элементы внутри Shadow DOM учитываются иначе, чем при рендеринге; на границе теневого дерева функция может вернуть 0, чтобы не раскрывать его содержимое.
Учитываются все элементы-соседи, а не только подходящие под селектор. Если в списке есть скрытый li, он всё равно попадёт в счёт; форма с фильтром of пока только обсуждается в CSSWG.
Индексация начинается с 1, как у :nth-child(), а не с 0.

Можно ли использовать в проде

Для декоративных эффектов вроде задержек анимации можно уже сейчас: в браузере без поддержки calc(sibling-index() * 80ms) будет невалидным значением, и правило просто не применится, элементы появятся одновременно. Для раскладки, от которой зависит читаемость, стоит завернуть правило в @supports:

			@supports (width: calc(sibling-count() * 1px)) {
  .cards > * { flex-basis: calc(100% / sibling-count()); }
}

Кому это ничего не даст: проектам, которые обязаны поддерживать браузеры старше Chrome 138 и Safari 26.2, а также тем, кто уже генерирует индексы на сервере. По данным Web Platform DX, Chrome и Chrome Android получили функции в версии 138 от 24 июня 2025 года, Edge 138 от 26 июня 2025 года, Safari и iOS Safari в 26.2 от 12 декабря 2025 года, Firefox и Firefox Android в 154 от 18 августа 2026 года.

Из соседних CSS-новостей на сайте: Firefox 155 добавил функцию progress(), а в Chrome 154 beta появились режимы links и tabs у scroll-marker-group. Черновик спецификации с формальным описанием функций лежит на сайте CSSWG.

Источники: Обсуждение в r/css, Web Platform DX: sibling-count и sibling-index, CSS Values and Units Module Level 5

В этой статье