Home/ Questions/Q 8949291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T13:11:21+00:00

I’m looking for the best way to implement alternating row colours for a theoretically

  • 0

I’m looking for the best way to implement alternating row colours for a theoretically infinite number of nested levels. Below is an example of the markup i’m testing with and the jsFiddle http://jsfiddle.net/DFn82/

With nth-child it’s very difficult to get the alternating colours to work correctly, you need to effectively hardcode the combinations for each level and the css rules grow exponentially.

I can achieve the result I want using javascript, however the lists are completely dynamic and things are added and removed constantly. Performance wise using javascript doesn’t seem like an option and could have some pretty massive implications.

This only needs to work in IE9+

enter image description here

<ul>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
        <ul>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Such implementation is not possible via css only. You will have to use javascript. Also, usage of JS shouldn’t cause such horrible performance. Just have JS check and update whenever new values are added or removed. Then, we’re talking about a performance of linearly dependent on number of rows. Hardly different from the browser trying to figure it out from css rules if it were possible (also linearly dependent on number of rows or worse).

    • 0