Как выбрать n-й элемент с прогрессией?

Question

Я хочу выбрать дочерние элементы в некоторой прогрессии.Но используя только CSS.

Например, необходимо выбрать элемент:

1, 2, 4, 8, 16, 32, 64, 128 и т. Д. *

или

1, 3, 9, 27, 81 и т. Д. ...

<div class="parent">
    <div class="child">some content</div>
    <div class="child">some content</div>
    <div class="child">some content</div>
    ... thousands probably of such children ...
    <div class="child">some content</div>
    <div class="child">some content</div>
    <div class="child">some content</div>
</div>

Answer 1

Используя SCSS по запросу, вы можете сделать следующее (во время цикла):

$i: 1;

@while $i < 100 {

    .test:nth-child(#{$i}) {
        background: blue;
    }

    $i: $i * 3;

}

Это скомпилирует и даст следующий вывод:

.test:nth-child(1) {
  background: blue; }

.test:nth-child(3) {
  background: blue; }

.test:nth-child(9) {
  background: blue; }

.test:nth-child(27) {
  background: blue; }

.test:nth-child(81) {
  background: blue; }

Это демонстрирует ваш второй вариант использования. Что касается первого, вы бы просто изменили формулу, которая вычисляет $i на $i: $i * 2;