The .less file for .list-striped is set up with a basic zebra striping pattern.
It even works for nested lists by reversing the selectors to avoid duplicate styling of parent and child list items.
However, we are looking to extend this functionality to N-level depths without endlessly nesting styles. Is there a solution using nth-child(even)/nth-child(odd) magic on the nested .list-item?
- C1
- C2
- C1
- C2
- C1
- C2
- C2
- C2
- C2
- C1
- C2
The HTML structure is:
<div class="list-striped">
<div class="list-item">
<a class="title">List title</a>
<!-- Start N-Level Nesting -->
<div class="list-striped">
<div class="list-item">
<a class="title">List title</a>
<!-- Repeat n-level nesting item here as needed -->
</div>
</div>
<!-- End N-level Nesting -->
</div>
<div class="list-item">
<a class="title">List title</a>
<!-- Start N-Level Nesting -->
<div class="list-striped">
<div class="list-item">
<a class="title">List title</a>
<!-- Repeat n-level nesting item here as needed -->
</div>
</div>
<!-- End N-level Nesting -->
</div>
</div>
And the corresponding CSS:
div {
.list-striped {
.list-item:nth-child(odd) {
a {
background-color: @tableBackgroundAccent;
}
.list-striped {
.list-item:nth-child(odd) a {
background-color: @white;
}
.list-item:nth-child(even) a {
background-color: @tableBackgroundAccent;
}
}
}
.list-item:nth-child(even) {
a {
background-color: @white;
}
.list-striped {
.list-item:nth-child(even) a {
background-color: @white;
}
.list-item:nth-child(odd) a {
background-color: @tableBackgroundAccent;
}
}
}
}
&.list-hover {
.list-item:hover a {
background-color: @tableBackgroundHover;
}
}
}