title: css overclassing in nested css definitions
body: <p>In a project, I use a complex css file in which css elements are described in such a manner :</p>
  
  <pre><code>.content &gt; .pages .page-content .widgets &gt; h2{
      some attributes...
  }
  
  .content &gt; .pages .page-content .widgets &gt; h2 &gt; p{
      some other attributes...
  }
  </code></pre>
  
  <p>The DOM structure is as follows :</p>
  
  <pre><code>&lt;div class = "page-content"&gt;
       &lt;div class = "widgets"&gt;
           etc...
  </code></pre>
  
  <p>Many elements are described this way which are nested one in another.</p>
  
  <p>Today, I need to rearrange this CSS in order to add a new div element between page-content and widgets so the structure becomes :</p>
  
  <pre><code>&lt;div class = "page-content"&gt;
       &lt;div class = "a new class or no class definition at all"&gt;
           &lt;div class = "widgets"&gt;
               etc...
  </code></pre>
  
  <p>Is there a simple way of doing this without having to modify each CSS definition, because there are so many nested elements that finding them all would be hard and time consuming...</p>
  
  <p>And again, thanks for your wise advice !</p>