Блог

Главная - Вопросы по программированию - Позиция индекса в родительском элементе как свойство css

Позиция индекса в родительском элементе как свойство css

#css

Вопрос:

У меня есть список элементов:

 <ul class="list">
  <li class="item">A sample</li>
  <li class="item">B sample</li>
  <li class="item">C sample</li>
  <li class="item">D sample</li>
</ul>

И я хочу, чтобы позиция элемента в списке и каждый следующий элемент в этом списке увеличивали шрифт до 10 пикселей.
Это должно выглядеть так: font-size: calc(10px * n); но эта штука не работает.

Как я могу использовать это n значение в качестве свойства в css, используя только css?

Комментарии:

1. Используйте SASS для генерации кода, в CSS такого нет

Ответ №1:

Вы не можете динамически считывать n как переменную в CSS, но вы можете использовать переменные CSS, чтобы минимизировать объем, который вы пишете, и контролировать поведение в одном свойстве:

 .item {
  font-size: calc(10px * var(--n, 1));
}

.item:nth-child(1) { --n: 1; }
.item:nth-child(2) { --n: 2; }
.item:nth-child(3) { --n: 3; }
.item:nth-child(4) { --n: 4; }

Рабочий пример: https://jsfiddle.net/L7atcjbg/

Метки: