title: Styled-Components: specify styles of children on parents hover
body: <p>I have a simple component
  Here are 2 version of it - with and without styled-components:</p>
  
  <h2>Without Styled Components</h2>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="kid"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  #container {
      width: 100px;
      height: 100px;
  }
  
  #kid {
      width: 20px;
      height: 20px;
  }
  
  #container:hover #kid{
      background: green;
  }
  </code></pre>
  
  <h2>With Styled Components</h2>
  
  <pre><code>const Container = styled.div`
      width: 100px;
      height: 100px;
  `;
  
  const Kid = styled.div`
      width: 20px;
      height: 20px;
  `;
  
  &lt;Container&gt;
      &lt;Kid /&gt;
  &lt;/Container
  </code></pre>
  
  <p>How to implement the same on hover behaviour that was in the previous example?</p>