title: target first-child css styled-components
body: <p>I am using styled-components and want to target the first child of <code>Text</code>, but am unable to do so.</p>
  <pre><code>const Text = styled.p`
      font-size: 12px;
      &amp;:first-child {
          margin-bottom: 20px;
      }
  `;
  
  ... component
  
  return(
     &lt;div&gt;
        &lt;p&gt;I am just regular text&lt;/p&gt;
        &lt;p&gt;Me too&lt;/p&gt;
        &lt;Text&gt;Hello Joe&lt;/Text&gt; // this should have the margin bottom
        &lt;Text&gt;Goodbye&lt;/Text &gt;
     &lt;/div&gt;
  )
  </code></pre>