title: Nest an object's parent
body: <p>I'm trying to generate some css that targets elements which have a differently named parent but a commonly named child. For example:</p>
  
  <pre><code>.icon-Part &gt; .km-icon:before {
      content: "\e600";
  }
  .icon-Time &gt; .km-icon:before {
      content: "\e601";
  }
  .icon-Error &gt; .km-icon:before {
      content: "\e602";
  }
  </code></pre>
  
  <p>Obviously if my situation were reversed and my aim was to generate css where the parents were commonly named but the child name differed I'd do something like this:</p>
  
  <pre><code>.parent-class {
      &gt; .child1-class {
         /* child1 specific styling */
      }
      &gt; .child2-class {
         /* child2 specific styling */
      }
  }
  </code></pre>
  
  <p>But I can't think of any way of doing the opposite. Any help would be appreciated.</p>