Мы вложили неупорядоченные списки с данными о продукте. Для

<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>

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

0
Toni_Nutone 24 Окт 2019 в 15:42

2 ответа

Лучший ответ

Вам необходимо применить 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;
    }
2
bananabrann 24 Окт 2019 в 14:53

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

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

.row:nth-child(even) {
  background: #fff;
}
1
Vestel 24 Окт 2019 в 12:45
58541657