WebDev+ | Веб-разработка on Telegram: “С помощью CSS можно использовать новую функцию s…”

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

Результаты этих функций можно использовать и в псевдоэлементах.

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

.container div { 
  border: calc(sibling-index() * 2px) solid;
  opacity: calc(sibling-index() / sibling-count());
}

.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N sibling-count() i sibling-index(); /* работают с текущим div */
}

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

@function --N() {
  result: sibling-count();
}
@function --i() {
  result: calc(sibling-index() - 1); /* начинаем с нуля, а не с единицы */
}

.container div { 
  border: calc(--i() * 2px) solid;
  opacity: calc(--i() / --N());
}

.container div::before {
  content: counter(i) "/" counter(N);
  counter-reset: N --N() i --i();
}

@WebDev_Plus