Proposal for new `any of these elements' selector type

Greetings

I am not subscribed to this list, however I came up with an idea for a
new selector type and Daniel Glazman suggested I post it here.

Mozilla, as you may know, relies largely on CSS to determine how HTML is
rendered, even before CSS is applied by the author and/or the user. To
be precise, Mozilla relies on a little file called html.css which (among
other things) contains CSS rules for every HTML element which Mozilla supports.

I was browsing through html.css several months ago, and I saw the
following rules Mozilla uses for determining how unordered lists at
various nesting levels have various kinds of bullets.
|
| /* lists */
|...
| ul, menu, dir {
|...
|   list-style-type: disc;
|...
| }
|...
| /* 2 deep unordered lists use a circle */
| ol ul,   ul ul,   menu ul,   dir ul,
| ol menu, ul menu, menu menu, dir menu,
| ol dir,  ul dir,  menu dir,  dir dir {
|   list-style-type: circle;
| }
|
| /* 3 deep (or more) unordered lists use a square */
| ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
| ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
| ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
| ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
| ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
| ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
| menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
| menu ol menu, menu ul menu, menu menu menu, menu dir menu,
| menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
| dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
| dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
| dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
|   list-style-type: square;
| }

Two things bother me about this code. Firstly, it doesn't rotate the
list-style-types for lists nested greater than three deep -- whereas
Internet Explorer for Mac, for example, will infinitely rotate between
disc, circle, filledsquare, and square, which is typographically much
more pleasing. There doesn't seem to be a way to specify indefinite
rotation like that in CSS; for that you'd need a `modulo' syntax for
selectors, something like
|
| (ul)%4 ul {list-style-type: disc;}
| (ul)%4 ul ul {list-style-type: circle;}
| (ul)%4 ul ul ul {list-style-type: filledsquare;}
| (ul)%4 ul ul ul ul {list-style-type: square;}
|...

However, that's not my main concern here. My main concern is that is
that the complexity of the selector grows nearly exponentially with the
level of nesting. html.css currently goes three levels deep for
unordered lists, and the selector for the third level contains 144
element names; if we decided to go further and use a different style for
lists four deep, the selector would be horrendously large.

The cause of the problem is that instead of just selecting on UL, we're
selecting on UL or OL or DIR or MENU. And while CSS allows selecting on
one element (NameOfElementHere) or all elements (*), it does not allow
selecting on a particular subset of elements.

So, I thought, why not introduce `any of these elements' syntax into
CSS? Then all the above html.css code could be replaced with only three lines:
|
|                                   ul {list-style-type: disc;}
|                  (ul,ol,menu,dir) ul {list-style-type: circle;}
| (ul,ol,menu,dir) (ul,ol,menu,dir) ul {list-style-type: square;}

Discuss amongst yourselves. :-)

-- 
Matthew `mpt' Thomas, Mozilla UI Design component default assignee thing
<http://mozilla.org/>

Received on Wednesday, 2 January 2002 12:38:12 UTC