Как задать свои классы, для дублирующихся блоков?

Question

[Azami]

Подскажите пожалуйста, как с помощью css применить свои стили к элементам ul в текущей ситуации.

Имеется 3 блока идентичной конструкции, выводящиеся один за другим. Дело в том, что назначить классы каждому блоку не представляется возможным. Поэтому использовал псевдоклассы для применения стилей каждому ul

.u-block:first-child {background:#000;}
     .u-block:nth-child(2) {background:red;}
     .u-block:nth-child(3) {background:green;}
    
    .u-block {width:100px; height:20px}
    .i-block {list-style:none}

Но при этом последующие ul (u-block) в следующих 2-х блоках div (in-block), так же перенимают стили, а хотелось бы чтобы все 9 ul имели свои.

Вот тут для наглядности.
https://codepen.io/WA-A/pen/EePrZP - хотелось бы, чтобы остальные 6 ul не повторяли цвета первых 3-х, а имели свои.

<div class="block">
    <div class="in-block">
    
    <ul class="u-block">
    <li class="i-block"></li>
    <li class="i-block"></li>
    </ul>
    
    <ul class="u-block">
    <li class="i-block"></li>
    <li class="i-block"></li>
    </ul>
    
    <ul class="u-block">
    <li class="i-block"></li>
    <li class="i-block"></li>
    </ul>
    
    </div>
    </div>
    
    <div class="block">
    <div class="in-block">
    
    <ul class="u-block">
    <li class="i-block"></li>
    <li class="i-block"></li>
    </ul>
    
    <ul class="u-block">
    <li class="i-block"></li>
    <li class="i-block"></li>
    </ul>
    
    <ul class="u-block">
    <li class="i-block"></li>
    <li class="i-block"></li>
    </ul>
    
    </div>
    </div>

Возможно ли реализовать задумку только средствами css?
Спасибо

Answer 1

[0xD34F]

Указывайте nth-child и для родительского блока. Типа так.

UPD. Ну и ещё посмотрите в сторону использования препроцессоров - у вас тут получается много дублирующегося кода, можно же всё сократить.

Comments

[Azami]

Спасибо!