Possible to change background-color according to nested level?

Question

I have an ordered list that can potentially have an infinite amount of nested lists. I'm looking to dynamically change the `background-color` of each nested list so that it progressively gets darker, making the grouping of each list much easier to understand. So I have this basic structure (that can continue infinitely): ```

``` Right now, I can accomplish this using something like this: ``` .top-level-list li ol li ol li { background: #D4D4D4; } .top-level-list li ol li ol li ol li{ background: #C7C7C7; } ``` That gives me what I want, but it is limited in how many levels I can use and each level adds more and more data to my CSS file, resulting in longer load times. Is there a way to dynamically set the color with a single selector? I know CSS3 has added some new CSS selector tricks, but I can't find anything documenting something like this. Nor can I find a way to make a value in the selector co…

Accepted Answer

Sort of. It's not exactly what you're looking for, but by using `rgba` for a `background-color` you can do a pretty decent simulation, I think. http://jsfiddle.net/jRdQC/

```
.top-level-list ol {
    background-color:rgba(0,0,0,.2);
}
```

The background colors 'layer' and therefore get darker as you go.

Possible to change background-color according to nested level?

Solution

Problem