Как изменить выражение в :nth-child с помощью JavaScript?

Question

[Ирина]

Есть в стилях глобальная переменная

:root{
    --main:4;
}

которая может принимать значения от 1 до 7. Вопрос - можно ли как-то в зависимости от значения этой переменной как-то изменять значение выражения в скобках у псевдоэлемента :nth-child ? Пробовала так, но это не работает

.container div:nth-child(7n-var(--main)){
  color: red;
}

или может с помощью JavaScript как-то можно это сделать?

Comments

[iBird Rose]

в этом месте css переменные использовать нельзя.
опиши ситуацию подробнее. что именно ты хочешь? тогда и ответы появятся

[Ирина]

iBird Rose, В выражении псевдоэлемента nth-child формула (7n-4). Мне нужно вместо четверки подставлять значение либо из CSS переменной либо из JavaScript переменной.

[iBird Rose]

Ирина, это как раз так и все поняли. ты объясни подробно для чего ты это делаешь. возможно ты не с той стороны подошел к вопросу

[Ирина]

iBird Rose, есть блок с статическим списком элементов. С помощью :nth-child в нем подсвечивается каждый 7-й элемент + смещение. Величину смещения нужно изменять с помощью JS. Таких блоков много и в них разное количество элементов.

[iBird Rose]

Ирина, ну вот решение "в лоб" https://codepen.io/ibird/pen/RwBKRPP

Answer 1

[RAX7]

Comments

[Ирина]

да решение через правку стиля в шаблонной строке было в голове, но думала, что возможно проще сделать.