How can I restore the "auto" values with for list-style-type in nested unordered lists with CSS?
- by Michael
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>
