different bullet points for nested lists

Tim

unread,

Nov 21, 2003, 8:39:10 AM11/21/03

to

On various other browsers, when lists are nested inside lists, the inner
lists often (automatically) use a different bullet point than the outer
lists (e.g. the 1st generation being a solid circle, the 2nd being a
circle outline, the third being a square). This can aid comprehending
the structure of some lists, particularly complex ones.

--
My "from" address is totally fake. The reply-to address is real, but
may be only temporary. Reply to usenet postings in the same place as
you read the message you're replying to.

CrazyTerabyte

unread,

Nov 21, 2003, 11:07:38 PM11/21/03

to

On Sat, 22 Nov 2003 00:09:10 +1030, Tim <ad...@sheerhell.lan> wrote:

> On various other browsers, when lists are nested inside lists, the inner
> lists often (automatically) use a different bullet point than the outer
> lists (e.g. the 1st generation being a solid circle, the 2nd being a
> circle outline, the third being a square). This can aid comprehending
> the structure of some lists, particularly complex ones.

Yes, that is good, but will brake this rule:
<URL: http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type >
Which says that initial value for a list-style-type of a list-item element will be "disc".

You can use an user stylesheet. I think this one works.

/* Different List-level bullet stylesheet

Created by CrazyTerabyte at 2003-11-22

This one shows different bullets for each depth level of the list.
Supports lists in HTML only.
*/

ul > li { list-style-type: disc; }
li ul > li { list-style-type: circle; }
li li ul > li { list-style-type: square; }
li li li ul > li { list-style-type: disc; }
li li li li ul > li { list-style-type: circle; }
li li li li li ul > li { list-style-type: square; }
li li li li li li ul > li { list-style-type: disc; }
li li li li li li li ul > li { list-style-type: circle; }
li li li li li li li li ul > li { list-style-type: square; }
li li li li li li li li li ul > li { list-style-type: disc; }
li li li li li li li li li li ul > li { list-style-type: circle; }
li li li li li li li li li li li ul > li { list-style-type: square; }

Thomas Scholz

unread,

Nov 22, 2003, 4:47:22 AM11/22/03

to

Tim wrote:

> On various other browsers, when lists are nested inside lists, the inner
> lists often (automatically) use a different bullet point than the outer
> lists (e.g. the 1st generation being a solid circle, the 2nd being a
> circle outline, the third being a square). This can aid comprehending
> the structure of some lists, particularly complex ones.

From my user stylesheet:

ul>li,
ul>li ul>li ul>li ul>li
{
list-style: square;
}
ul>li ul>li
{
list-style: disc;
}
ul>li ul>li ul>li
{
list-style: circle;
}

Opera should include something like this in the default user stylesheet.

Thomas

CrazyTerabyte

unread,

Nov 24, 2003, 12:59:46 AM11/24/03

to

> Opera should include something like this in the default user stylesheet.

No, Opera shouldn't. See discussion at opera.customize.general.

BTW, I note one difference between your stylesheet and mine. Your CSS only works in nested UL lists. Everytime there is another type of list (like OL), the bullet-style isn't changed. My one have different bullets for different levels (3rd level will always be a square), independently of "parent" lists.

Your stylesheet isn't incorrect, neither is mine, they are simply different.

Da Twink Daddy

unread,

Nov 24, 2003, 10:04:59 AM11/24/03

to

On Mon, 24 Nov 2003 03:59:46 -0200, CrazyTerabyte
<deni...@vialink.com.br> wrote:

>> Opera should include something like this in the default user stylesheet.
>
> No, Opera shouldn't. See discussion at opera.customize.general.
>
> BTW, I note one difference between your stylesheet and mine. Your CSS
> only works in nested UL lists. Everytime there is another type of list
> (like OL), the bullet-style isn't changed.
>

> Your stylesheet isn't incorrect, neither is mine, they are simply
> different.

And, just to illustrate how varied opinions are on this, I have my bullets
start over for all but strictly nested lists so my stylesheet looks like:

UL > LI, UL > LI > UL > LI > UL > LI > UL > LI { /* Stuff */ }
UL > LI > UL > LI { /* Stuff */ }
UL > LI > UL > LI > UL > LI { /* Stuff */ }

--
Da Twink Daddy
datwin...@icqmail.com
ICQ: Da Twink Daddy (514984)
YM: DaTwinkDaddy
AIM: DaTwinkDaddy

CrazyTerabyte

unread,

Nov 25, 2003, 11:33:33 PM11/25/03

to

> And, just to illustrate how varied opinions are on this, I have my bullets start over for all but strictly nested lists so my stylesheet looks like:
>
> UL > LI, UL > LI > UL > LI > UL > LI > UL > LI { /* Stuff */ }
> UL > LI > UL > LI { /* Stuff */ }
> UL > LI > UL > LI > UL > LI { /* Stuff */ }

But this is a problem. If anyone tries to enclose an UL using a P, DIV, or any other tag, your CSS won't work.

Tim

unread,

Nov 26, 2003, 9:48:05 AM11/26/03

to

Unattributed sources wrote:

>> And, just to illustrate how varied opinions are on this, I have my
>> bullets start over for all but strictly nested lists so my stylesheet
>> looks like:
>>
>> UL > LI, UL > LI > UL > LI > UL > LI > UL > LI { /* Stuff */ }
>> UL > LI > UL > LI { /* Stuff */ }
>> UL > LI > UL > LI > UL > LI { /* Stuff */ }

CrazyTerabyte <deni...@vialink.com.br> wrote:

> But this is a problem. If anyone tries to enclose an UL using a P, DIV,
> or any other tag, your CSS won't work.

Well, to be pedantic, they can't put a list inside a paragraph (it's not
allowed, nor is it logical), but they can go inside various other tags
(divs included).

While not testing the theory, are you sure that it wouldn't work? The
rules look like they only need one of those nested inside the other,
they don't preclude them both being nested inside something else.

CrazyTerabyte

unread,

Nov 26, 2003, 10:12:56 PM11/26/03

to

Tim <ad...@sheerhell.lan> wrote:

> Da Twink Daddy <datwin...@icqmail.com> wrote:
>>>
>>> UL > LI, UL > LI > UL > LI > UL > LI > UL > LI { /* Stuff */ }
>>> UL > LI > UL > LI { /* Stuff */ }
>>> UL > LI > UL > LI > UL > LI { /* Stuff */ }
>
> CrazyTerabyte <deni...@vialink.com.br> wrote:
>
>> But this is a problem. If anyone tries to enclose an UL using a P, DIV,
>> or any other tag, your CSS won't work.
>
> Well, to be pedantic, they can't put a list inside a paragraph (it's not
> allowed, nor is it logical), but they can go inside various other tags
> (divs included).

I was think about pages around web out there, where there are a lot of mal-formed pages.

> While not testing the theory, are you sure that it wouldn't work? The
> rules look like they only need one of those nested inside the other,

I didn't understand you.

Those rules only match a UL that is a child of a LI. If there is something like <li> <div> <ul>, so the last UL won't be matched. This is the thing I pointed at my message. Maybe I haven't expressed myself well.

Toby A Inkster

unread,

Nov 27, 2003, 5:36:17 PM11/27/03

to

On Thu, 27 Nov 2003 01:18:05 +1030, Tim wrote:

> Well, to be pedantic, they can't put a list inside a paragraph (it's not
> allowed, nor is it logical),

Not *directly* allowed, but consider:

Or replace <object/> with <noscript/>.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

Thomas Scholz

unread,

Nov 27, 2003, 7:14:22 PM11/27/03

to

CrazyTerabyte wrote:

> BTW, I note one difference between your stylesheet and mine. Your CSS
> only works in nested UL lists.

You haven't tested it, have you?

> Everytime there is another type of list (like OL), the bullet-style
> isn't changed.

Given an example from my stylesheet...

ul>li ul>li
{
list-style:disc;
}

...and the following HTML...

...my stylesheet matches perfectly and exactly as I want it: the second
'ul>li' in a nested list has 'list-style:disc;'.

> My one have different bullets for different levels (3rd level will
> always be a square), independently of "parent" lists.

My goal was to separate the 1st, 2nd, 3rd... unordered list. Not the level
of nesting. Different goals different stylesheets. :)

> Your stylesheet isn't incorrect, neither is mine, they are simply
> different.

As you said.

Thomas

Tim

unread,

Nov 28, 2003, 8:58:35 AM11/28/03

to

Tim wrote:

>> Well, to be pedantic, they can't put a list inside a paragraph (it's not
>> allowed, nor is it logical),

Toby A Inkster <tob...@goddamn.co.uk> wrote:

> Not *directly* allowed, but consider:
>
> <p>
> <object>
> <ul>
> <li>List item.</li>
> </ul>
> </object>
> </p>

A gold star for ingenuity.

> Or replace <object/> with <noscript/>.

I'm not sure that noscript would hold true, though.

HTML logistics aside, a list, in the usual UL or OL manner doesn't
belong inside a paragraph. On the other hand, there are some types of
lists that might belong in a paragraph, even if HTML doesn't really
support them (*). Such as remember to buy; eggs, cheese, bread, milk,
and lettuce, when you go shopping. That's a "list," is semantically
okay in the middle of a paragraph. ;-)

* You can do that sort of thing by mucking around with CSS.

Toby A Inkster

unread,

Nov 30, 2003, 11:51:23 AM11/30/03

to

On Sat, 29 Nov 2003 00:28:35 +1030, Tim wrote:

> HTML logistics aside, a list, in the usual UL or OL manner doesn't
> belong inside a paragraph. On the other hand, there are some types of
> lists that might belong in a paragraph, even if HTML doesn't really
> support them (*). Such as remember to buy; eggs, cheese, bread, milk,
> and lettuce, when you go shopping. That's a "list," is semantically
> okay in the middle of a paragraph. ;-)

As an aside, it looks like XHTML 2 will allow lists inside paragraphs.

Da Twink Daddy

unread,

Dec 1, 2003, 1:04:54 PM12/1/03

to

That's intended behavior for my CSS. I *want* the bullet style to "reset"
if they are not *strictly* nested.