title: How can I restore the "auto" values for list-style-type in nested unordered lists?
body: <p>By default, an unstyled set of nested <code>&lt;ul&gt;</code> lists looks like this (in Chrome, Firefox, and IE at least):</p>
  
  <p><img src="https://i.stack.imgur.com/TAZOy.png" alt="Nested &lt;ul&gt; screenshot"></p>
  
  <p>The top level has a <code>list-style-type</code> of <code>disc</code>, the next level is <code>circle</code>, and subsequent levels are <code>square</code>.</p>
  
  <p>If I include a stylesheet that changes the <code>list-style-type</code> to <code>none</code>, 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)</p>
  
  <p>Basically, I'm looking for something like <code>list-style-type: auto;</code> (which is apparently not valid and has no effect):</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      ul { list-style-type: none; }
      ul { list-style-type: auto; } /* Does not work */
  &lt;/style&gt;
  </code></pre>
  
  <p>Setting the <code>list-style-type</code> back to <code>disc</code> changes every bullet in the list and I no longer see different bullets at different levels, so that doesn't work either.</p>
  
  <p>Is the only way to accomplish this by explicitly defining styles for every level? e.g.:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      ul { list-style-type: disc; }
      ul ul { list-style-type: circle; }
      ul ul ul { list-style-type: square; }
  &lt;/style&gt;
  </code></pre>