Michael Michael - 3 years ago 66
CSS Question

How can I restore the "auto" values for list-style-type in nested unordered lists?

By default, an unstyled set of nested

<ul>
lists looks like this (in Chrome, Firefox, and IE at least):

Nested <ul> screenshot

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

If I include a stylesheet that changes the
list-style-type
to
none
, is there a simple way to revert back to the "automatic bullet types" later in the document? (e.g., override with a subsequent CSS definition or JavaScript style change)

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

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


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

Is the only way to accomplish this by explicitly defining styles for every level? e.g.:

<style type="text/css">
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
</style>

Answer Source

use classes to write for something like:

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

and then on the ul you want to apply bullets to,

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

Also, please do take other posters advice when it comes to not using "auto" behaviors. There are so many proprietary extensions to the standard and manufacturer-defined defaults that will just make you pull your hair out later. Develop the good habit now of not depending on their sanity.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download