0

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

Но при этом последующие 2 блока div (in-block), содержащие ul (u-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>

<div class="block">
<div class="i-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? Спасибо

3
  • А для каких ещё меняется (последующих 2?) Чёт я их не нахожу этих 2х Commented 26 авг. 2018 в 8:48
  • Нет, стили человеческие, для наглядности структуры, указал цифрами? сейчас отредактирую. С помощью псевдоклассов css я назначил стили для 3-х ul, но последующие 6 ul, у которых те же самые стили, которые обрамлены в аналогичные div приобрели такие же свойства. Попробую скинуть пример
    – WA-A
    Commented 26 авг. 2018 в 8:51
  • Вот тут видно наглядно, как цвета остальных блоков такие же как первых трех, а хотелось бы, чтобы у каждого был свой цвет codepen.io/WA-A/pen/EePrZP
    – WA-A
    Commented 26 авг. 2018 в 8:59

1 ответ 1

2

Пример

.block:first-of-type .u-block {
  background: #000;
}

.block:first-of-type .u-block:nth-of-type(2) {
  background: red;
}

.block:first-of-type .u-block:nth-of-type(3) {
  background: green;
}

.u-block {
  width: 100px;
  height: 20px;
  background: #ccc;
}

.i-block {
  list-style: none
}
<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>

<div class="block">
  <div class="i-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>

1
  • Точно! .nth-of-type Спасибо!!! Отметил ваше решение, но пока не хватает репутации.
    – WA-A
    Commented 26 авг. 2018 в 9:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.