Подскажите пожалуйста, как с помощью 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?
Спасибо
