CSS-функция `sibling-index()`

sibling-index() CSS-функция возвращает целое число, представляющее положение текущего элемента в DOM-дереве относительно всех его соседних элементов. Возвращаемое значение — это индекс текущего дочернего элемента среди всех соседних элементов внутри родительского элемента: для первого дочернего элемента возвращается 1, а для последнего — length из Element.children.

Попробуйте

--width: calc(sibling-index() * 30px);

--width: calc(sibling-index() * 20px);

--width: calc(sibling-index() * 10px);

--width: 100px;

<ul id="example-element">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

#example-element {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#example-element > li {
  text-align: center;
  padding: 2px;
  border-radius: 8px;
  width: var(--width, calc(sibling-index() * 30px));
  color: white;
  background-color: hsl(
    calc(360deg / sibling-count() * sibling-index()) 50% 50%
  );
}

Синтаксис

sibling-index()

Параметры

Функция sibling-index() не принимает параметров.

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

Целое число — положение текущего элемента в порядке соседних элементов DOM-дерева.

Примеры

Динамическая ширина списка

В этом примере показано, как динамически увеличивать ширину каждого элемента <li> в <ul> на 50px.

HTML

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

CSS

li {
  width: calc(sibling-index() * 50px);
  background-color: #ffaaaa;
}

Результат

Последовательные анимации

Сочетание sibling-index() с CSS-анимациями открывает новые возможности. В этом примере непрозрачность элементов изменяется в заданном порядке: значение animation-delay устанавливается в зависимости от расположения элемента в DOM.

HTML

Добавим контейнер с четырьмя дочерними элементами:

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

CSS

Применим к каждому элементу анимацию fade-in. Используем функцию sibling-index() внутри функции calc(), чтобы установить длительность animation-delay в зависимости от положения элемента в исходном порядке. Свойство animation-fill-mode сохраняет 0% ключевого кадра анимации до истечения animation-duration.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  animation-delay: calc(1s * sibling-index());
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Результат

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

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

См. также

• sibling-count()
• counter()