Как применить цвет фона для детей в повторном рисунке (синий, фиолетовый, красный) ⇐ CSS

[Anonymous]

У меня есть родительский див, с различным числом детей. Детские девчонки всегда будут в пределах родительского дивизионного дел. Продолжайте повторять синий, фиолетовый, красный для остальных детей. < /p>
Как я могу сделать это с помощью CSS? Я не уверен, как применить это, чтобы он повторился. -html prettyprint-override ">
Parent with 10 children


ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN
EIGHT
NINE
TEN

< /code>
И вот CSS, который работает только для первых 3 детей Divs: < /p>
.child {
background-color: color-mix(
in srgb,
var(--child-color, rgb(168, 168, 168)) 10%,
transparent
);
color: var(--child-color, rgb(168, 168, 168));
border: 1px solid var(--child-color, rgb(168, 168, 168));
}

/* How do I repeat this so that the children will repeat with backgrounds as blue, purple, red? */
.parent .child:nth-child(1) {
--child-color: oklch(51.01% 0.274 263.83);
}

.parent .child:nth-child(2) {
--child-color: oklch(47.66% 0.246 305.88);
}

.parent .child:nth-child(3) {
--child-color: oklch(61.42% 0.238 15.34);
}
< /code>
Приведенный выше код применяет только цвет к первым трем DOV. Я не уверен, как сохранить шаблон с CSS. Я действительно надеюсь использовать CSS для этого.
Я думаю, я мог бы применить разные классы к детям на основе индекса в цикле, но я бы предпочел использовать CSS. < /P>

у меня есть стеклейтц, созданный для этого: https://stackblitz.com/edit/stackblitz- ... styles.css


Подробнее здесь: https://stackoverflow.com/questions/794 ... lue-purple