I have implemented the following CSS code to alternate the background color of li elements. However, I am facing an issue where I need the CSS styling to remain consistent even if the rows have the .hidden class applied to them (with .hidden class having display: none;).
ul li:not(.hidden):nth-child(odd) {
background: #fff;
}
ul li:not(.hidden):nth-child(even) {
background: #f4f4f4;
}
Does anyone have a solution on how to maintain the alternating colors when adding or removing li elements from the ul? I would prefer a CSS-based solution, but will consider JavaScript as a last resort.
Thank you!