Вложенные <ul>нечетные / четные CSS

Question

У нас есть неупорядоченные списки с данными о продукте. Для

<ul class="data_holder">

нам нужны нечетные / четные цвета фона.

ul.data_holder:odd => background: #ccc

ul.data_holder:even => background: #FFF

Вся наша структура выглядит следующим образом (как вы видите, наш ul.data_holder находится внутри элемента "li" родительского неупорядоченного списка:

<ul class="row_holder">
 <li class="row">
   <ul class="data_holder">
     <li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
   </ul>
 </li>
  <li class="row">
   <ul class="data_holder">
     <li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
   </ul>
 </li>
  <li class="row">
   <ul class="data_holder">
     <li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
   </ul>
 </li>
  <li class="row">
   <ul class="data_holder">
     <li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
   </ul>
 </li>
</ul>

Спасибоза помощь

Answer 1

Вам необходимо применить CSS к li, а не к ul, который находится внутри li. Попробуйте ниже CSS:

    ul.row_holder li:nth-child(odd) ul{
          background-color:red;
    }
    ul.row_holder li:nth-child(even) ul{
          background-color:black;
    }

Answer 2

Вы можете использовать следующую структуру CSS, nth-child (нечетное / четное). С помощью этого кода вы сможете использовать разные стили для нечетных / четных объектов в списке, подобном этому неупорядоченному списку. Поскольку у вас есть первый <ul> с <li> элементами внутри, я бы посоветовал вам сделать этот селектор для .row элементов в вашем HTML.

.row:nth-child(odd) {
  background: #ccc;
}

.row:nth-child(even) {
  background: #fff;
}