[css3] Selection depending on depth

Hi,

find below some comments on selection depending on depth.

Kind regards,
<http://www.pms.ifi.lmu.de/mitarbeiter/bry/>François Bry, Paula-Lavinia 
Patranjan, Christoph Wieser


The selectors of CSS 3 proposed in
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/ allow for
alternating selections in breadth (cf. ":nth-child(an+b)") but not in
depth. For consistency reasons a similar selector for alternating
selections in depth called :nth-descendant(an+b) would make sense.
(cf. http://lists.w3.org/Archives/Public/www-style/2003Dec/0052.html)

Highly nested semi-structured data could be visualized independant of
depth. Currently, only styling down to a certain depth is possible
using stylesheets like the following one.

*         { color : red }
* *       { color : blue }
* * *     { color : red }
* * * *   { color : blue }
..
..
..

Similar example: http://www.cip.ifi.lmu.de/~wieser/visDepth.jpg

Instead of writing one rule for each level, the following rules
would be sufficient for documents of any depth:

*:nth-descendant(2n+1) { color : red }
*:nth-descendant(2n+2) { color : blue }


Use cases:

* Alternated rendering of headers in a newsgroup thread

  An alternated rendering offers a better outline of nested messages.

  Example of an unstyled, :), thread:
  http://forum.de.selfhtml.org/archiv/2005/5/t107948/


* Comparing two branches of highly nested semi-structured data

  The "Tree of Life" is a well-known example of a highly nested tree,
  which represents our knowledge about life on earth. Comparing two
  different branches of the tree would be easier, if all nodes on the
  same level (like all species) had the same color different from
  other levels. One could easily compare the name of a species in both
  branches by simply finding nodes of the same color.

Received on Saturday, 14 January 2006 03:47:58 UTC