- From: Jim Allan <allan_jm@tsb1.tsbvi.edu>
- Date: Wed, 01 Dec 1999 12:12:08 -0600
- To: "Gregory J. Rosmaita" <unagi69@concentric.net>, Marja-Riitta Koivunen <marja@w3.org>
- Cc: User Agent Guidelines Emailing List <w3c-wai-ua@w3.org>
Gregory wrote--
i'm still trying to figure out how to get pseudo-elements to calculate the
depth of nested list items, i.e.:
<UL>
<LI>
<UL>
<LI>
<UL>
<LI>
</UL>
</UL>
<LI>
</UL>
to translate to:
* level 1 list item
+ level 2 list item
o level 3 list item
* level 1 list item
--end Gregory
Jim Comments
there are 2 ways that I know of,
first is a manual hack in a style sheet
ol:before { content : "level 1 "; }
ol ol:before { content : "level 2 "; }
ol ol ol:before { content : "level 3 "; }
the other way is more elegant. it uses the "counter" attribute of the
"content" property (this is paraphrased from Cascading Style Sheets by Lie
and Bos) see also http://www.w3.org/TR/REC-CSS2/generate.html#scope (an
excellent description of generated counters.
for example, to generate the following
1. first list item
2. second list item
2.1 first item in sub list
2.2 second item in sub list
2.2.1 first item in sub-sub list
the style would look like
ol {counter-reset: itemnr } where "itemnr" is an author defined variable
name
li:before { content: counters(itemnr, "."); counter-increment: itemnr }
The 'counters()' function generates a string composed of the values of all
counters with the same name, separated by a given string.
Example(s):
The previous style sheet numbers nested list items as "1", "1.1", "1.1.1",
etc.
Received on Wednesday, 1 December 1999 13:13:55 UTC