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>
I recently encountered a need for this (no nesting, but still preferred not implicitly setting roman vs. greek etc.) and used
inherit
with success. Naturally, effect will vary depending on what rules have been defined, but it worked in my case.Yep, using ul, it's the only way. Basically this exactly what chrome is doing.
If you still want to keep the chrome style starting at the second level, do not use ul for the first level! Use a div...
use classes to write for something like:
and then on the ul you want to apply bullets to,
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.