[kwlug-disc] CSS: varying colours based on inheritance

Wed Jul 6 21:51:34 EDT 2011

----- Original Message -----
> 
> You can do that with "descendant selectors"
> http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
> 
> I recommend you read the entire section on selectors because it's
> really powerful.
> 
> Here's an example
> 
> ul { color: #00ff00; }
> ul ul { color: #00aa00; }
> ul ul ul { color: #007700; }

If that's too much work for you, you can set this in a javascript. Run in <body onload="setStyle();">

function setStyle() {
    var stylesheet = document.createElement('style');
    var indents = 12;
    var count;
    var selector = "";
    var colour = 255;

    for (count = 0; count < indents; count++) {
        selector += "ul ";
        // Not sure the following will work when colour is less then 0x10
        stylesheet.innerHTML += selector + " { color: #00" + colour.toString(16) + "00; }";

        colour = Math.round(colour * 0.9);
    }
    document.body.appendChild(stylesheet);
}

-- 
John Van Ostrand 
CTO, co-CEO 
Net Direct Inc. 
564 Weber St. N. Unit 12, Waterloo, ON N2L 5C6 
Ph: 866-883-1172 x5102 
Fx: 519-883-8533 

Linux Solutions / IBM Hardware 