title: Styling nested lists with any depth
body: <p>I was wondering if it's possible to style nested unordered lists with CSS only, without using any scripts. The problem is that CSS needs to work for any depth of the list tree. </p>
  
  <p>For example, I have a list:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
      &lt;li class="holder"&gt;
          &lt;ul&gt;
              &lt;li&gt;Item 4&lt;/li&gt;
              &lt;li&gt;Item 5&lt;/li&gt;
               &lt;li class="holder"&gt; 
                  &lt;ul&gt;
                      &lt;li&gt;Item 6&lt;/li&gt;
                      &lt;li&gt;Item 7&lt;/li&gt;
                      &lt;li&gt;Item 8&lt;/li&gt;   
                      &lt;li class="holder"&gt; 
                          &lt;ul&gt;
                              &lt;li&gt;Item 9&lt;/li&gt;
                              &lt;li&gt;Item 10&lt;/li&gt;
                              &lt;li&gt;Item 11&lt;/li&gt;        
                          &lt;/ul&gt;
                      &lt;/li&gt; 
                  &lt;/ul&gt;
              &lt;/li&gt;        
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And this is my CSS:</p>
  
  <pre><code>li{
      background: gray;
      border: 1px solid;
      display: block;
      margin: 2px;
  }
  .holder{
      background: none;
      border: none;
  }
  
  /*replace these styles*/
  li &gt; ul &gt; li{
      background: white;
  }
  
  li &gt; ul &gt; li &gt; ul &gt; li{
      background: gray;
  }
  
  li &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li{
      background: white;
  }
  </code></pre>
  
  <p>If node's parent has background A, node should have background B. If node's parent has background B, node should have background A.</p>
  
  <p>Please check : <a href="http://jsfiddle.net/bCU34/6/" rel="nofollow">http://jsfiddle.net/bCU34/6/</a></p>