nested lists looks like this (in ...">

How to restore "auto" values โ€‹โ€‹for a list-style in nested unordered lists?

By default, an uninstalled set of <ul> nested lists looks like this (in Chrome, Firefox, and IE at least):

Nested <ul> screenshot

The top level has list-style-type of disc , the next level is circle , and the next levels are square .

If I include a stylesheet that changes list-style-type to none , is there an easy way to revert to โ€œautomatic bullet typesโ€ later in the document? (for example, override with subsequent CSS definition or JavaScript style change)

Basically, I'm looking for something like list-style-type: auto; (which is apparently invalid and has no effect):

 <style type="text/css"> ul { list-style-type: none; } ul { list-style-type: auto; } /* Does not work */ </style> 

Setting list-style-type back to disc changes every brand in the list, and I no longer see different bullets at different levels, so this doesn't work either.

Is this the only way to do this by explicitly defining styles for each level? eg:.

 <style type="text/css"> ul { list-style-type: disc; } ul ul { list-style-type: circle; } ul ul ul { list-style-type: square; } </style> 
+7
source share
3 answers

use classes to write for something like:

 ul { list-style-type: none; } .list_default { list-style-type: circle; } 

and then on ul, to which you want to apply markers,

 <ul class="list_default"> <li>one</li> <li>two</li> </ul> 

Also, please consult other posters when it comes to not using โ€œautoโ€ behavior. There are so many proprietary extensions to standard and custom defaults that just make you pull your hair out later. Develop a good habit now, regardless of their rationality.

+1
source

Is this the only way to do this by explicitly defining styles for each level?

Yes, using ul is the only way. Basically this is exactly what chrome does.

If you still want to keep the chrome style starting from the second level, do not use ul for the first level! Use div ...

0
source

I recently encountered the need for this (there was no nesting, but still preferred not to imply installing roman against greek, etc.) and successfully used inherit . Naturally, the effect will depend on what rules were defined, but it worked in my case.

0
source

All Articles