Nested <ul> odd / even css - html

Question

We have nested unordered lists with product data.
For
<ul class="data_holder">
we want odd/even background colors.
ul.data_holder:odd => background: #ccc
ul.data_holder:even => background: #FFF
Our whole structure looks like this (as you see, our ul.data_holder sits inside an "li" element of the parent unordered list:
<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>
Thanks for help

Answer 1

You need to apply a CSS to the li, not to the ul which is inside the li. Try Below 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

You can use the following CSS structure, nth-child(odd/even). With this code, you'll be able to have different stylings for odd/even objects in a list like this unordered list. Since you have a first <ul> with <li> elements inside, I would suggest you do this selector on the .row elements in your HTML.
.row:nth-child(odd) {
background: #ccc;
}
.row:nth-child(even) {
background: #fff;
}