title: :first-child selector not applying in emotion css
body: <p>I have a styled component as below</p>
  
  <pre><code>const StyledCustomComponent = styled.aside`
  min-width: ${gridPts(19)};
  background-color: ${HIGHLIGHT_BLUE};
  flex: 0 0 auto;
  ${fontSize(13)}
  padding: ${gridPts(2)};
  
  @media only screen and (max-width: ${MQ_320}) {
  padding: ${gridPts(1)};
  }
  
  @media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
  
    &amp;:first-child {
      margin-top: 0;
    }
  }
  `
  </code></pre>
  
  <p>When I inspect it in the browser and resize to match the media query, the :first-child style does not apply.</p>
  
  <p>And the child components of the above component are styled as below</p>
  
  <pre><code>const StyledCustomComponentChild = css`
    margin: ${gridPts(1)} ${gridPts(1)} 0;
    @media only screen and (max-width: ${MQ_575}), (min-width: ${MQ_961}) and (max-width: ${MQ_1285}) {
        display: inline-block;
        float: left;
        margin-right: ${gridPts(1)};
  
        &amp; * {
          display: inline-block;
          margin-right: ${gridPts(1)};
        }
    }
  
    @media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
      display: block;
      line-height: 1.5em;
      margin: ${gridPts(3)} 0;
      white-space: nowrap;
       &amp;:first-child {
        display: block;
      }
    }
  `
  </code></pre>
  
  <p>This style is applied to the component itself instead of its first child</p>
  
  <p>here is the screen shot of how the style is interpreted in the browser dev tools</p>
  
  <p><a href="https://i.stack.imgur.com/KRbHi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KRbHi.png" alt="enter image description here"></a></p>
  
  <p>Notice there is no <code>space</code> before <code>:first-child</code>
  If I manually add a space through dev tools then the style is applied as expected</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import styled from 'react-emotion'
  
  const StyledDiv = styled.div`
   color: turquoise;
  &amp; :last-child {   
   color:green;
    }
   &amp; :first-child {
    color: red;
   }
   
  `
  render(
   &lt;StyledDiv&gt;
  &lt;p&gt;First&lt;/p&gt;
  &lt;p&gt;Second&lt;/p&gt;
  &lt;p&gt;third&lt;/p&gt;
  &lt;p&gt;last&lt;/p&gt;
   &lt;/StyledDiv&gt;
  )</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone guess what might be the issue?</p>