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х 26 авг 2018 в 8:48
  • Нет, стили человеческие, для наглядности структуры, указал цифрами? сейчас отредактирую. С помощью псевдоклассов css я назначил стили для 3-х ul, но последующие 6 ul, у которых те же самые стили, которые обрамлены в аналогичные div приобрели такие же свойства. Попробую скинуть пример
    – WA-A
    26 авг 2018 в 8:51
  • Вот тут видно наглядно, как цвета остальных блоков такие же как первых трех, а хотелось бы, чтобы у каждого был свой цвет codepen.io/WA-A/pen/EePrZP
    – WA-A
    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
    26 авг 2018 в 9:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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