Стилизовать родственные элементы с помощью аддитивных преобразований

Question

Я пытался добиться следующего, не объявляя все nth-of-type(x):

li:nth-of-type(2) {
  transform: scale(0.9);
}
li:nth-of-type(3) {
  transform: scale(0.81);
}
li:nth-of-type(4) {
  transform: scale(0.729);
}
li:nth-of-type(5) {
  transform: scale(0.6561);
}

<ul>
  <li>LI 1</li>
  <li>LI 2</li>
  <li>LI 3</li>
  <li>LI 4</li>
  <li>LI 5</li>
</ul>

Этот фрагмент, вероятно, должен работать, если transform было установлено в качестве «аддитивного свойства»:

li ~ li {
  transform: scale(0.9);
}

<ul>
  <li>LI 1</li>
  <li>LI 2</li>
  <li>LI 3</li>
  <li>LI 4</li>
  <li>LI 5</li>
</ul>

Я знаю, как это можно сделать, переупорядочив HTML (но элементы больше не будут братьями и сестрами) или используя некоторый JavaScript, но…
IsnЕсть ли какая-нибудь хитрость, которая делает это возможным только с помощью CSS?

Заранее спасибо.

Answer 1

К сожалению нет. Единственный способ, которым я бы знал, - это дать каждому ученику класс, но это только перевернет проблему.

Однако в препроцессорах CSS есть циклы, такие как less или Sass, где вы можете перебрать список и сделать значение преобразования меньшим или большим.

Меньше циклов