title: simplify css for nested divs
body: <p>I have a DOM like this:</p>
  
  <pre><code>&lt;div class='container'&gt;
    &lt;div class='visual'&gt;
      indent indicator
    &lt;/div&gt;
    &lt;div class='nomove'&gt;
      text in this class is always left-aligned
    &lt;/div&gt;
    &lt;div class='container'&gt;
      &lt;div class='visual'&gt;
        indent indicator
      &lt;/div&gt;
      &lt;div class='nomove'&gt;
        text in this class is always left-aligned
      &lt;/div&gt;
      &lt;!-- more container nesting possible --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is</p>
  
  <pre><code>.container .visual {
      margin-left:20px;
  }
  .container .container .visual {
      margin-left:40px;
  }
  .container .container .container .visual {
      margin-left:60px;
  }
  </code></pre>
  
  <p>which has to be done for every depth level and is of course silly.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/TMAXa/4/" rel="nofollow">jsfiddle</a> (Updated: more structure, more lines of text)</p>
  
  <p>Is there a simpler solution that maintains the tree-like HTML and has the same effect?</p>