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

[John Van Ostrand]

----- Original Message -----
> I can't find the right terminology to use in websearches for this, so
> I turn to
> you smart people (CSS is FLOSS, right?). Say I have a deeply nested
> list that I
> would like to style with CSS:
> 
> 
> - Level 1, item 1
> - Level 1, item 2
> + Level 2, item 2.1
> + Level 2, item 2.2
> * Level 3, item 2.2.1
> * Level 3, item 2.2.2
> + Level 2, item 2.3
> - Level 1, item 3
> + Level2, item 3.1
> 
> The list could be pretty deep (not arbitrarily so, but deep all the
> same).
> 
> Say I use CSS to set the top level colour. Is there a way for me to
> programmatically define the second level's colour based upon the
> parent level?
> So items at level 2 are 10% more green, and items at level 3 are 10%
> more green
> than those at level 2? Or am I stuck with setting colours at each
> individual
> level?

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; }


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