2

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>
Improve this question
6
  • Hi Paul. Will you please rephrase with an actual question? I think you are asking "Is there a better way to do this with CSS?" Commented Dec 5, 2012 at 13:03
  • Also, are you wanting a CSS solution that works to an arbitrary number of levels, without having to provide the specific cases in CSS? Commented Dec 5, 2012 at 13:05
  • you should write a function in javascript and should cal it whenever you need. It won't affect performance, since you are having very few items. If you need i can try that function. Commented Dec 5, 2012 at 13:05
  • Is your example how you want it, or how it's wrong? Do you want the 5th row in your example to be green? Commented Dec 5, 2012 at 13:08
  • @RoToRa I think the example shows how it works at the first nesting, but does not work at the second nesting. Commented Dec 5, 2012 at 13:13

1 Answer 1

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yes, this is impossible with CSS because it doesn't have a notion of nth nesting depth.
I thought this was the case, however wanted to fire out the question incase someone new of a new pseudo selector that may make this possible. I'm using websockets to pull back data, stuff is coming back incredibly quickly and in chunks. As each chunks comes back it is written to the DOM. Overall there could be ~ 3,000 rows, they may be nested and each level is collapsable. Just didn't want to keep recalculating in JS every time I run a redraw or expand/collapse a section of the hierarchy. But I guess the browser is running similar calculations in order to render the styles.
Still using JS, however the act of applying even/odd classes isn't complicated, so it might not be as processor intensive as one would think. 1. Event: rows change, 2. using document.query selector, get all elements with class ".row" (or whatever). 3. Loop through the elements, remove previous class (if any) and apply class odd to each odd row. That's all. This will ensure no row color-collisions occur. The logic would run any time the user would collapse/expand the tree. Main downside: User may glimpse the color changing for some rows when they manipulate the tree.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.