Question

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

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 1

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.