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

<ol class="top-level-list">
    <li>
        <ol>
            <li>
                <ol>
                    <li></li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

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 correspond to the selector itself.

Answer 1

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.

Answer 2

You could parse the tree with javascript to avoid the CSS burden. You will first need a function for color luminance:

function luminance(hex, lum) {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
        hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
    }
    lum = lum || 0;
    // convert to decimal and change luminosity
    var rgb = "#", c, i;
    for (i = 0; i < 3; i++) {
        c = parseInt(hex.substr(i*2,2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00"+c).substr(c.length);
    }
    return rgb;
}

And then you would have to apply a darker color based on the nested level.

var color = '#efefef';

// You could also get the styled color by using:
// var color = $('.class-goes-here').css('background-color');

$('ol').each(function() {
    var depth = $(this).parents('ol').length;
    var darken_ratio = depth * .1;

    var darker_color = luminance(color, -darken_ratio);

    $(this).css('background-color', darker_color);
});

Here is the fiddle: http://jsfiddle.net/dDUaF/1/

You can make the color darker by increasing the decimal in the darken_ratio variable. This will also work with any color in hex. For example: http://jsfiddle.net/dDUaF/4/

Answer 3

Here is another possible approach, that I went with, now that we can use calc and var in CSS. Haven't tested in IE or Safari, but looks like it works in Firefox, and up to 15 levels in Chrome (seems like that may be an implementation problem).

• Does not use Javascript

• Does not require that elements to modify have transparency between them

• Allows for using the variable for other things like changing the hue (see commented line), borders, text, etc.

    :root {
      --levelCount1: 0;
      --levelCount2: 0;
    }
  
    ol {
      padding: 1em;
  
      --levelCount1: calc(var(--levelCount2) + 1);
    }
  
    li {
      border: 1px solid blue;
  
      --levelCount2: calc(var(--levelCount1));
      /* provides fallback for once if/when vars are no longer usable */
      background-color: hsl(20, 40%, 90%);
      background-color: hsl(200, 40%, calc(90% - ((var(--levelCount1) * 4) * 1%)));
      /*background-color: hsl(calc(var(--levelCount1) * 208), 40%, calc(90% - ((var(--levelCount1) * 4) * 1%))); */
    }