Функция CSS `sibling-count()`

Базовая поддержка Недавно стала доступна

Эта функция работает в последних версиях устройств и браузеров. Она может не работать на старых устройствах и в старых версиях браузеров. Она доступна во всех браузерах с августа 2026 года.

sibling-count() — это CSS-функция, которая возвращает целое число, обозначающее общее количество соседних элементов DOM (непосредственных дочерних элементов родителя) элемента, для которого она используется, включая сам этот элемент.

Примечание: Функция counter() возвращает похожий результат, но в виде <string> (что лучше подходит для генерируемого содержимого), тогда как sibling-count() возвращает <integer> (которое можно использовать в вычислениях).

Синтаксис

sibling-count()

Параметры

Функция sibling-count() не принимает параметры.

Возвращаемое значение

Целое число — общее количество соседних элементов DOM, включая сам элемент.

Примеры

Динамическое количество столбцов

В этом примере показано, как задавать ширину каждого элемента списка в зависимости от количества элементов, чтобы разместить каждого дочернего элемента в отдельном столбце.

HTML

Мы добавляем контейнер <ul> и несколько дочерних элементов <li>.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

Мы делим width каждого элемента списка на количество непосредственных дочерних элементов списка. Кроме того, для всех нечётных элементов задаём background-color, чтобы нагляднее показать результат.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
}

li {
  width: calc(100% / sibling-count());
}

li:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 0.05);
}

Результаты

Спецификации

Спецификация
Модуль значений и единиц CSS, уровень 5 # funcdef-sibling-count

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`sibling-count`	138	138	154	122	26.2	138	154	91	26.2	30.0	138	26.2

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/sibling-count